frontend-app/components/qiaobao-assistant/qiaobao-assistant.vue

<template>
  <view v-if="visible" class="qiaobao-assistant" :class="{ 'is-collapsed': collapsed }">
    <view v-if="collapsed" class="qiaobao-edge-tab"
      :class="{ 'is-left': collapsedEdge === 'left', 'is-dragging': dockDragging }" :style="dockStyle" role="button"
      aria-label="桥宝已收起，点击展开" @click.stop="restoreFromDock" @tap.stop="restoreFromDock" @touchstart.stop="handleDockDragStart"
      @touchmove.stop.prevent="handleDockDragMove" @touchend.stop="handleDockDragEnd"
      @touchcancel.stop="handleDockDragEnd" @mousedown.stop.prevent="handleDockMouseDragStart">
      <image class="qiaobao-edge-head" src="https://static.tbmall.xin/static/mine/qiaobao-edge-peek.png"
        mode="aspectFit" />
    </view>

    <view v-else class="qiaobao-float" :class="{ 'is-scratching': action === 'scratch' }" :style="floatStyle"
      role="button" aria-label="桥宝，点击查看当前页面说明，长按可隐藏" @click.stop="openHelp" @tap.stop="openHelp" @longpress.stop="openHideMenu"
      @contextmenu.stop.prevent="openHideMenu" @touchstart.stop="handleDragStart"
      @touchmove.stop.prevent="handleDragMove" @touchend.stop="handleDragEnd" @touchcancel.stop="handleDragEnd"
      @mousedown.stop.prevent="handleMouseDragStart">
      <view v-if="showBubble" class="qiaobao-bubble">点我，了解这个页面</view>
      <image class="qiaobao-image" :src="actionImage" mode="aspectFit" />
      <view class="qiaobao-shadow" />
    </view>

    <view v-if="panelVisible" class="qiaobao-mask" @click="closeHelp" @touchmove.stop.prevent>
      <view class="qiaobao-sheet" @click.stop>
        <view class="qiaobao-handle" />
        <view class="qiaobao-sheet-head">
          <view class="qiaobao-avatar-wrap">
            <image class="qiaobao-avatar" src="https://static.tbmall.xin/static/mine/qiaobao-idle.png"
              mode="aspectFit" />
          </view>
          <view class="qiaobao-title-wrap">
            <text class="qiaobao-kicker">桥宝 · AI 商城助手</text>
            <view class="qiaobao-online-row">
              <view class="qiaobao-online-dot" />
              <text class="qiaobao-title">陪你逛信任桥TB商城</text>
            </view>
          </view>
          <view class="qiaobao-close" aria-label="关闭" @click="closeHelp">×</view>
        </view>

        <view class="qiaobao-page-context">
          <text class="qiaobao-context-label">当前页面</text>
          <text class="qiaobao-context-title">{{ resolvedTitle }}</text>
        </view>

        <scroll-view class="qiaobao-chat" scroll-y :scroll-top="chatScrollTop" :scroll-with-animation="true">
          <view v-for="(item, index) in chatMessages" :key="`${item.role}-${index}`" class="qiaobao-message"
            :class="`is-${item.role}`">
            <image v-if="item.role === 'assistant'" class="qiaobao-message-avatar"
              src="https://static.tbmall.xin/static/mine/qiaobao-idle.png" mode="aspectFit" />
            <view class="qiaobao-message-bubble">
              <text>{{ item.content }}</text>
            </view>
          </view>
          <view v-if="chatLoading" class="qiaobao-message is-assistant">
            <image class="qiaobao-message-avatar" src="https://static.tbmall.xin/static/mine/qiaobao-blink.png"
              mode="aspectFit" />
            <view class="qiaobao-message-bubble is-typing"><text>桥宝正在想</text><text class="qiaobao-dots">•••</text>
            </view>
          </view>
          <view class="qiaobao-chat-spacer" />
        </scroll-view>

        <scroll-view v-if="suggestions.length" class="qiaobao-suggestions" scroll-x :show-scrollbar="false">
          <view class="qiaobao-suggestion-row">
            <button v-for="suggestion in suggestions" :key="suggestion" class="qiaobao-suggestion"
              @click="sendSuggestion(suggestion)">{{ suggestion }}</button>
          </view>
        </scroll-view>

        <view class="qiaobao-compose">
          <input v-model="chatInput" class="qiaobao-input" maxlength="500" confirm-type="send"
            placeholder="问桥宝商城、商品或活动问题" :disabled="chatLoading" @confirm="sendMessage" />
          <button class="qiaobao-send" :disabled="chatLoading || !chatInput" @click="sendMessage">发送</button>
        </view>
        <view class="qiaobao-sheet-foot">
          <text class="qiaobao-hide-hint">长按桥宝可收起到屏幕边缘</text>
          <text class="qiaobao-human-link" @click="goToCustomerService">人工客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  consumeQiaobaoAutoIntro,
  closeQiaobaoForSession,
  getQiaobaoChatHistory,
  getQiaobaoChatSessionId,
  getCurrentPagePath,
  getQiaobaoDockEdge,
  getQiaobaoPosition,
  hideQiaobaoForPage,
  hideQiaobaoGlobally,
  isQiaobaoClosedForSession,
  isQiaobaoHidden,
  saveQiaobaoPosition,
  saveQiaobaoChatHistory,
  setQiaobaoDockEdge,
  showQiaobao,
} from "@/utils/qiaobao.js";
import { resolveQiaobaoPageHelp } from "@/utils/qiaobao-page-help.js";
import { getStorageFun, USER_DATA } from "@/utils/auth.js";
import { chatWithQiaobao } from "@/api/qiaobao.js";

const MALL_WELCOME = "你好，我是桥宝。信任桥TB商城为你提供食品饮料、家居日用、个护清洁等日常商品。商城重视商品信息、价格展示、规则透明和消费权益记录。你可以问我商城特色、商品活动、订单入口或商城规则。";
const LOGIN_WELCOME = "欢迎回来，我是桥宝。以后逛商城、看活动或不清楚规则时，点我就可以直接问。账户、订单、物流等实时信息请以对应页面为准，需要人工帮助我也会告诉你入口。";
const DEFAULT_SUGGESTIONS = ["商城有什么特点", "怎么买更划算", "贡献值是什么", "联系人工客服"];

const ACTION_IMAGES = {
  idle: "https://static.tbmall.xin/static/mine/qiaobao-idle.png",
  blink: "https://static.tbmall.xin/static/mine/qiaobao-blink.png",
  scratch: "https://static.tbmall.xin/static/mine/qiaobao-scratch.png",
};

export default {
  name: "QiaobaoAssistant",
  props: {
    pageKey: { type: String, default: "" },
    title: { type: String, default: "" },
    summary: { type: String, default: "" },
    tips: { type: Array, default: () => [] },
    bubble: { type: Boolean, default: true },
  },
  emits: ["open", "close", "hide"],
  data() {
    return {
      visible: false,
      collapsed: false,
      collapsedEdge: "right",
      panelVisible: false,
      showBubble: false,
      action: "idle",
      actionTimer: null,
      bubbleTimer: null,
      longPressTriggered: false,
      position: null,
      viewportWidth: 0,
      viewportHeight: 0,
      safeAreaTop: 0,
      safeAreaBottom: 0,
      petWidth: 82,
      petHeight: 88,
      dockHeight: 48,
      dockDragging: false,
      dockDragMoved: false,
      dockDragJustEnded: false,
      dockDragStartPoint: { x: 0, y: 0 },
      dockDragOriginY: 0,
      dockPointerX: 0,
      dragging: false,
      dragMoved: false,
      dragJustEnded: false,
      dragStartPoint: { x: 0, y: 0 },
      dragOrigin: { x: 0, y: 0 },
      chatInput: "",
      chatLoading: false,
      chatMessages: [],
      suggestions: [...DEFAULT_SUGGESTIONS],
      chatScrollTop: 0,
      chatSessionId: "",
      chatScope: "guest",
      autoIntroTimer: null,
    };
  },
  computed: {
    currentPageKey() {
      return this.pageKey || getCurrentPagePath();
    },
    actionImage() {
      return ACTION_IMAGES[this.action] || ACTION_IMAGES.idle;
    },
    floatStyle() {
      if (!this.position) return null;
      return {
        left: `${this.position.x}px`,
        top: `${this.position.y}px`,
        right: "auto",
        bottom: "auto",
      };
    },
    dockStyle() {
      if (!this.position) return null;
      const maxTop = Math.max(this.safeAreaTop + 8, this.viewportHeight - this.safeAreaBottom - this.dockHeight - 8);
      return {
        top: `${Math.min(maxTop, Math.max(this.safeAreaTop + 8, this.position.y + (this.petHeight - this.dockHeight) / 2))}px`,
        bottom: "auto",
      };
    },
    automaticHelp() {
      return resolveQiaobaoPageHelp(this.currentPageKey);
    },
    resolvedTitle() {
      return this.title || this.automaticHelp.title;
    },
    resolvedSummary() {
      return this.summary || this.automaticHelp.summary;
    },
    resolvedTips() {
      const customTips = Array.isArray(this.tips) ? this.tips.filter(Boolean) : [];
      return customTips.length ? customTips : this.automaticHelp.tips;
    },
  },
  mounted() {
    uni.$on("qiaobao-visibility-change", this.handleVisibilityChange);
    this.initializeDragPosition();
    this.refreshVisibility();
    this.initializeChat();
    // #ifdef H5
    window.addEventListener("mousemove", this.handleMouseDragMove);
    window.addEventListener("mouseup", this.handleMouseDragEnd);
    // #endif
  },
  beforeUnmount() {
    uni.$off("qiaobao-visibility-change", this.handleVisibilityChange);
    // #ifdef H5
    window.removeEventListener("mousemove", this.handleMouseDragMove);
    window.removeEventListener("mouseup", this.handleMouseDragEnd);
    // #endif
    this.clearTimers();
    if (this.autoIntroTimer) clearTimeout(this.autoIntroTimer);
  },
  methods: {
    initializeChat() {
      const userData = getStorageFun(USER_DATA) || {};
      this.chatScope = userData.userId ? `user-${userData.userId}` : "guest";
      this.chatSessionId = getQiaobaoChatSessionId();
      this.chatMessages = getQiaobaoChatHistory(this.chatScope);
      if (!this.chatMessages.length) {
        this.chatMessages = [{ role: "assistant", content: MALL_WELCOME }];
        saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
      }
      const reason = consumeQiaobaoAutoIntro(userData.userId);
      if (reason === "first-login") {
        this.appendAssistantMessage(LOGIN_WELCOME, false);
      }
    },
    appendAssistantMessage(content, persist = true) {
      if (!content) return;
      const last = this.chatMessages[this.chatMessages.length - 1];
      if (!last || last.role !== "assistant" || last.content !== content) {
        this.chatMessages.push({ role: "assistant", content });
      }
      if (persist) saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
      this.scrollChatToBottom();
    },
    scrollChatToBottom() {
      this.$nextTick(() => { this.chatScrollTop += 10000; });
    },
    sendSuggestion(value) {
      if (this.chatLoading) return;
      if (value === "联系人工客服") {
        this.goToCustomerService();
        return;
      }
      this.chatInput = value;
      this.sendMessage();
    },
    async sendMessage() {
      const content = String(this.chatInput || "").trim();
      if (!content || this.chatLoading) return;
      this.chatInput = "";
      this.chatMessages.push({ role: "user", content });
      saveQiaobaoChatHistory(this.chatMessages, this.chatScope);
      this.chatLoading = true;
      this.scrollChatToBottom();
      try {
        const history = this.chatMessages.slice(-9, -1).map(({ role, content: value }) => ({ role, content: value }));
        const data = await chatWithQiaobao({
          message: content,
          pagePath: this.currentPageKey,
          pageTitle: this.resolvedTitle,
          sessionId: this.chatSessionId,
          history,
        });
        this.suggestions = Array.isArray(data.suggestions) && data.suggestions.length ? data.suggestions : [...DEFAULT_SUGGESTIONS];
        this.appendAssistantMessage(data.message || "桥宝暂时没理解，可以换一种方式问我。", true);
      } catch (error) {
        this.appendAssistantMessage("网络有点忙。你可以稍后再问，或进入人工客服咨询商品、订单、物流和售后问题。", true);
      } finally {
        this.chatLoading = false;
        this.scrollChatToBottom();
      }
    },
    goToCustomerService() {
      this.closeHelp();
      uni.navigateTo({
        url: "/pages/rwa_package/setting/kefu",
        fail: () => uni.navigateTo({ url: "/pages/rwa_package/kefu/kefu" }),
      });
    },
    initializeDragPosition() {
      const systemInfo = uni.getSystemInfoSync();
      this.viewportWidth = Number(systemInfo.windowWidth) || 375;
      this.viewportHeight = Number(systemInfo.windowHeight) || 667;
      this.safeAreaTop = Number(systemInfo.safeAreaInsets?.top) || 0;
      this.safeAreaBottom = Number(systemInfo.safeAreaInsets?.bottom) || 0;
      const scale = this.viewportWidth / 750;
      this.petWidth = 164 * scale;
      this.petHeight = 176 * scale;
      this.dockHeight = 126 * scale;
      const storedPosition = getQiaobaoPosition();
      const defaultPosition = {
        x: this.viewportWidth - this.petWidth - 10,
        y: this.viewportHeight - this.safeAreaBottom - this.petHeight - 66,
      };
      this.position = this.clampPosition(storedPosition || defaultPosition);
    },
    clampPosition(position) {
      const minX = 0;
      const maxX = Math.max(0, this.viewportWidth - this.petWidth);
      const minY = this.safeAreaTop + 4;
      const maxY = Math.max(minY, this.viewportHeight - this.safeAreaBottom - this.petHeight - 4);
      return {
        x: Math.min(maxX, Math.max(minX, Number(position?.x) || 0)),
        y: Math.min(maxY, Math.max(minY, Number(position?.y) || minY)),
      };
    },
    getTouchPoint(event) {
      const touch = event?.touches?.[0] || event?.changedTouches?.[0];
      if (!touch) return null;
      return { x: Number(touch.clientX), y: Number(touch.clientY) };
    },
    getMousePoint(event) {
      if (!event || !Number.isFinite(Number(event.clientX))) return null;
      return { x: Number(event.clientX), y: Number(event.clientY) };
    },
    startDragging(point) {
      if (!point || this.panelVisible) return;
      this.dragging = true;
      this.dragMoved = false;
      this.dragStartPoint = point;
      this.dragOrigin = { ...(this.position || { x: 0, y: 0 }) };
      this.showBubble = false;
    },
    handleDragStart(event) {
      this.startDragging(this.getTouchPoint(event));
    },
    handleMouseDragStart(event) {
      this.startDragging(this.getMousePoint(event));
    },
    handleDragMove(event) {
      if (!this.dragging) return;
      const point = this.getTouchPoint(event);
      if (!point) return;
      const deltaX = point.x - this.dragStartPoint.x;
      const deltaY = point.y - this.dragStartPoint.y;
      if (!this.dragMoved && Math.hypot(deltaX, deltaY) > 6) {
        this.dragMoved = true;
        this.longPressTriggered = false;
      }
      this.position = this.clampPosition({
        x: this.dragOrigin.x + deltaX,
        y: this.dragOrigin.y + deltaY,
      });
    },
    handleMouseDragMove(event) {
      if (this.dockDragging) {
        this.moveDockDragging(this.getMousePoint(event));
        return;
      }
      if (!this.dragging) return;
      const point = this.getMousePoint(event);
      if (!point) return;
      const deltaX = point.x - this.dragStartPoint.x;
      const deltaY = point.y - this.dragStartPoint.y;
      if (!this.dragMoved && Math.hypot(deltaX, deltaY) > 6) this.dragMoved = true;
      this.position = this.clampPosition({
        x: this.dragOrigin.x + deltaX,
        y: this.dragOrigin.y + deltaY,
      });
    },
    handleMouseDragEnd() {
      if (this.dockDragging) {
        this.handleDockDragEnd();
        return;
      }
      this.handleDragEnd();
    },
    startDockDragging(point) {
      if (!point) return;
      this.dockDragging = true;
      this.dockDragMoved = false;
      this.dockDragStartPoint = point;
      this.dockDragOriginY = this.position ? this.position.y : this.safeAreaTop + 120;
      this.dockPointerX = point.x;
    },
    handleDockDragStart(event) {
      this.startDockDragging(this.getTouchPoint(event));
    },
    handleDockMouseDragStart(event) {
      this.startDockDragging(this.getMousePoint(event));
    },
    moveDockDragging(point) {
      if (!this.dockDragging || !point) return;
      const deltaX = point.x - this.dockDragStartPoint.x;
      const deltaY = point.y - this.dockDragStartPoint.y;
      if (!this.dockDragMoved && Math.hypot(deltaX, deltaY) > 5) {
        this.dockDragMoved = true;
      }
      this.dockPointerX = point.x;
      this.collapsedEdge = point.x < this.viewportWidth / 2 ? "left" : "right";
      this.position = this.clampPosition({
        x: this.position ? this.position.x : 0,
        y: this.dockDragOriginY + deltaY,
      });
    },
    handleDockDragMove(event) {
      this.moveDockDragging(this.getTouchPoint(event));
    },
    handleDockDragEnd() {
      if (!this.dockDragging) return;
      this.dockDragging = false;
      if (!this.dockDragMoved) {
        this.restoreFromDock();
        return;
      }
      setQiaobaoDockEdge(this.collapsedEdge);
      saveQiaobaoPosition(this.position);
      this.dockDragJustEnded = true;
      setTimeout(() => {
        this.dockDragJustEnded = false;
        this.dockDragMoved = false;
      }, 280);
    },
    handleDragEnd() {
      if (!this.dragging) return;
      this.dragging = false;
      if (!this.dragMoved) {
        if (!this.longPressTriggered) {
          this.openHelp();
        } else {
          this.longPressTriggered = false;
        }
        return;
      }
      this.position = this.clampPosition(this.position);
      saveQiaobaoPosition(this.position);
      const edgeThreshold = Math.max(22, this.viewportWidth * 0.06);
      if (this.position.x <= edgeThreshold) {
        hideQiaobaoGlobally("left");
      } else if (this.position.x + this.petWidth >= this.viewportWidth - edgeThreshold) {
        hideQiaobaoGlobally("right");
      }
      this.dragJustEnded = true;
      setTimeout(() => {
        this.dragJustEnded = false;
        this.dragMoved = false;
      }, 280);
    },
    getNearestEdge() {
      if (!this.position) return "right";
      return this.position.x + this.petWidth / 2 < this.viewportWidth / 2 ? "left" : "right";
    },
    refreshVisibility() {
      if (isQiaobaoClosedForSession()) {
        this.visible = false;
        this.panelVisible = false;
        this.clearTimers();
        return;
      }
      this.visible = true;
      this.collapsed = isQiaobaoHidden(this.currentPageKey);
      this.collapsedEdge = getQiaobaoDockEdge();
      if (this.collapsed) {
        this.showBubble = false;
        this.clearTimers();
        return;
      }
      this.preloadImages();
      this.startMotion();
      if (this.bubble) {
        this.showBubble = true;
        this.bubbleTimer = setTimeout(() => {
          this.showBubble = false;
        }, 5000);
      }
    },
    handleVisibilityChange({ scope, pagePath, edge } = {}) {
      if (scope === "close") {
        this.visible = false;
        this.panelVisible = false;
        this.clearTimers();
        return;
      }
      if (scope === "all") this.collapseToEdge(edge);
      if (scope === "page" && pagePath === this.currentPageKey) this.collapseToEdge(edge);
      if (scope === "show" && pagePath === this.currentPageKey) this.expandFromEdge();
      if (scope === "reset") this.refreshVisibility();
    },
    preloadImages() {
      // #ifdef H5
      Object.values(ACTION_IMAGES).forEach((src) => {
        const image = new Image();
        image.src = src;
      });
      // #endif
    },
    startMotion() {
      this.clearActionTimer();
      const nextDelay = 3200 + Math.floor(Math.random() * 2600);
      this.actionTimer = setTimeout(() => {
        const shouldScratch = Math.random() > 0.72;
        this.action = shouldScratch ? "scratch" : "blink";
        const duration = shouldScratch ? 1450 : 180;
        this.actionTimer = setTimeout(() => {
          this.action = "idle";
          this.startMotion();
        }, duration);
      }, nextDelay);
    },
    openHelp() {
      if (this.dragJustEnded) return;
      if (this.longPressTriggered) {
        this.longPressTriggered = false;
        return;
      }
      this.showBubble = false;
      this.panelVisible = true;
      this.action = "blink";
      this.$emit("open", this.currentPageKey);
    },
    closeHelp() {
      this.panelVisible = false;
      this.action = "idle";
      this.$emit("close", this.currentPageKey);
    },
    openHideMenu() {
      // longpress is emitted after touchstart, so `dragging` is normally true here.
      // Only an actual move should cancel the hide action.
      if (this.dragMoved || this.dockDragging) return;
      this.dragging = false;
      this.longPressTriggered = true;
      this.showBubble = false;
      const edge = this.getNearestEdge();
      uni.vibrateShort?.({ type: "light" });
      uni.showActionSheet({
        title: "桥宝操作",
        itemList: ["仅在当前页面隐藏", "在所有页面隐藏", "关闭桥宝"],
        success: ({ tapIndex }) => {
          if (tapIndex === 0) hideQiaobaoForPage(this.currentPageKey, edge);
          if (tapIndex === 1) hideQiaobaoGlobally(edge);
          if (tapIndex === 2) this.closeQiaobao();
          if (tapIndex < 2) this.$emit("hide", tapIndex === 1 ? "all" : "page");
        },
        complete: () => {
          setTimeout(() => {
            this.longPressTriggered = false;
          }, 350);
        },
      });
    },
    closeQiaobao() {
      this.panelVisible = false;
      this.showBubble = false;
      this.action = "idle";
      this.clearTimers();
      closeQiaobaoForSession();
      this.$emit("hide", "close");
    },
    collapseToEdge(edge = getQiaobaoDockEdge()) {
      this.collapsedEdge = edge === "left" ? "left" : "right";
      this.collapsed = true;
      this.panelVisible = false;
      this.showBubble = false;
      this.action = "idle";
      this.clearTimers();
    },
    expandFromEdge() {
      this.collapsed = false;
      const edgeX = this.collapsedEdge === "left"
        ? 12
        : Math.max(12, this.viewportWidth - this.petWidth - 12);
      const currentY = this.position ? this.position.y : this.safeAreaTop + 120;
      this.position = this.clampPosition({ x: edgeX, y: currentY });
      saveQiaobaoPosition(this.position);
      this.action = "blink";
      this.preloadImages();
      this.startMotion();
      setTimeout(() => {
        if (!this.collapsed) this.action = "idle";
      }, 180);
    },
    restoreFromDock() {
      if (this.dockDragJustEnded) return;
      showQiaobao(this.currentPageKey);
    },
    show() {
      this.visible = true;
      showQiaobao(this.currentPageKey);
    },
    clearActionTimer() {
      if (this.actionTimer) clearTimeout(this.actionTimer);
      this.actionTimer = null;
    },
    clearTimers() {
      this.clearActionTimer();
      if (this.bubbleTimer) clearTimeout(this.bubbleTimer);
      this.bubbleTimer = null;
    },
  },
};
</script>

<style scoped lang="scss">
.qiaobao-assistant {
  position: relative;
  z-index: 980;
}

.qiaobao-edge-tab {
  position: fixed;
  right: -18rpx;
  bottom: calc(150rpx + env(safe-area-inset-bottom));
  width: 132rpx;
  height: 126rpx;
  z-index: 981;
  overflow: visible;
  animation: qiaobao-edge-in-right .22s cubic-bezier(.22, 1, .36, 1) both;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.qiaobao-edge-tab.is-left {
  left: -18rpx;
  right: auto;
  animation-name: qiaobao-edge-in-left;
}

.qiaobao-edge-tab.is-dragging {
  animation: none;
}

.qiaobao-edge-head {
  width: 132rpx;
  height: 132rpx;
  display: block;
  pointer-events: none;
  transform-origin: center;
}

.qiaobao-edge-tab.is-left .qiaobao-edge-head {
  transform: scaleX(-1);
}

.qiaobao-float {
  position: fixed;
  right: 20rpx;
  bottom: calc(132rpx + env(safe-area-inset-bottom));
  width: 164rpx;
  height: 176rpx;
  z-index: 981;
  transform-origin: 50% 90%;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.qiaobao-image {
  position: relative;
  z-index: 2;
  width: 164rpx;
  height: 164rpx;
}

.qiaobao-shadow {
  position: absolute;
  left: 28rpx;
  right: 22rpx;
  bottom: 3rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(41, 21, 77, .2);
  filter: blur(6rpx);
  z-index: 1;
}

.qiaobao-bubble {
  position: absolute;
  right: 132rpx;
  top: 26rpx;
  width: 250rpx;
  padding: 20rpx 24rpx;
  border-radius: 24rpx 24rpx 6rpx 24rpx;
  color: #fff;
  background: #302645;
  box-shadow: 0 12rpx 32rpx rgba(27, 17, 51, .18);
  font-size: 24rpx;
  line-height: 1.45;
  white-space: nowrap;
  animation: qiaobao-bubble-in .2s ease-out both;
}

.is-scratching {
  animation: qiaobao-curious 1.45s ease-in-out both;
}

.qiaobao-mask {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: flex-end;
  background: rgba(20, 16, 29, .52);
  animation: qiaobao-mask-in .2s ease-out both;
}

.qiaobao-sheet {
  width: 100%;
  height: min(84vh, 1280rpx);
  max-height: 84vh;
  padding: 12rpx 28rpx calc(22rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  border-radius: 36rpx 36rpx 0 0;
  background: #fff;
  box-shadow: 0 -16rpx 48rpx rgba(29, 17, 55, .14);
  animation: qiaobao-sheet-in .24s ease-out both;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qiaobao-handle {
  width: 72rpx;
  height: 8rpx;
  margin: 4rpx auto 14rpx;
  flex: 0 0 auto;
  border-radius: 999rpx;
  background: #ddd8e8;
}

.qiaobao-sheet-head {
  display: flex;
  align-items: center;
  min-height: 92rpx;
  flex: 0 0 auto;
}

.qiaobao-avatar-wrap {
  width: 88rpx;
  height: 88rpx;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1eaff;
}

.qiaobao-avatar {
  width: 82rpx;
  height: 82rpx;
}

.qiaobao-title-wrap {
  min-width: 0;
  flex: 1;
  margin-left: 18rpx;
  display: flex;
  flex-direction: column;
}

.qiaobao-kicker {
  color: #7b2cff;
  font-size: 21rpx;
  font-weight: 650;
}

.qiaobao-online-row {
  display: flex;
  align-items: center;
  margin-top: 5rpx;
}

.qiaobao-online-dot {
  width: 12rpx;
  height: 12rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  background: #39ba76;
  box-shadow: 0 0 0 6rpx rgba(57, 186, 118, .12);
}

.qiaobao-title {
  min-width: 0;
  overflow: hidden;
  color: #17131f;
  font-size: 30rpx;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qiaobao-close {
  width: 58rpx;
  height: 58rpx;
  margin-left: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #6c6674;
  background: #f4f2f7;
  font-size: 46rpx;
  line-height: 1;
}

.qiaobao-page-context {
  display: flex;
  align-items: center;
  margin: 12rpx 0 10rpx;
  padding: 13rpx 18rpx;
  flex: 0 0 auto;
  border-radius: 16rpx;
  background: #f7f3ff;
}

.qiaobao-context-label {
  flex: 0 0 auto;
  color: #8e77b7;
  font-size: 21rpx;
}

.qiaobao-context-title {
  min-width: 0;
  margin-left: 14rpx;
  overflow: hidden;
  color: #392857;
  font-size: 23rpx;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qiaobao-chat {
  min-height: 0;
  flex: 1;
  padding: 10rpx 0;
  box-sizing: border-box;
}

.qiaobao-chat-spacer {
  height: 12rpx;
}

.qiaobao-message {
  display: flex;
  align-items: flex-end;
  margin: 12rpx 0;
  padding-right: 54rpx;
}

.qiaobao-message.is-user {
  justify-content: flex-end;
  padding: 0 0 0 54rpx;
}

.qiaobao-message-avatar {
  width: 54rpx;
  height: 54rpx;
  margin-right: 12rpx;
  flex: 0 0 auto;
  border-radius: 18rpx;
  background: #f0e8ff;
}

.qiaobao-message-bubble {
  max-width: 100%;
  padding: 17rpx 20rpx;
  box-sizing: border-box;
  border-radius: 10rpx 24rpx 24rpx 24rpx;
  color: #292431;
  background: #f4f1f7;
  font-size: 26rpx;
  line-height: 1.55;
  word-break: break-word;
}

.qiaobao-message.is-user .qiaobao-message-bubble {
  border-radius: 24rpx 10rpx 24rpx 24rpx;
  color: #fff;
  background: #7433f1;
}

.qiaobao-message-bubble.is-typing {
  display: flex;
  align-items: center;
  color: #756c80;
}

.qiaobao-dots {
  margin-left: 8rpx;
  color: #7b2cff;
  letter-spacing: 3rpx;
  animation: qiaobao-dots 1s ease-in-out infinite;
}

.qiaobao-suggestions {
  width: 100%;
  flex: 0 0 auto;
  margin: 2rpx 0 12rpx;
  white-space: nowrap;
}

.qiaobao-suggestion-row {
  display: inline-flex;
  gap: 12rpx;
  padding-right: 12rpx;
}

.qiaobao-suggestion {
  height: 56rpx;
  margin: 0;
  padding: 0 22rpx;
  border: 1rpx solid #ddcff8;
  border-radius: 999rpx;
  color: #6430bd;
  background: #faf8ff;
  font-size: 23rpx;
  line-height: 54rpx;
}

.qiaobao-suggestion::after {
  border: 0;
}

.qiaobao-compose {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 10rpx;
  border: 1rpx solid #e9e4ef;
  border-radius: 24rpx;
  background: #f8f7fa;
}

.qiaobao-input {
  height: 66rpx;
  min-width: 0;
  flex: 1;
  padding: 0 14rpx;
  color: #25202c;
  font-size: 26rpx;
}

.qiaobao-send {
  width: 112rpx;
  height: 62rpx;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18rpx;
  color: #fff;
  background: #7433f1;
  font-size: 25rpx;
  font-weight: 650;
  line-height: 62rpx;
}

.qiaobao-send[disabled] {
  color: #a9a3af;
  background: #e7e3eb;
}

.qiaobao-send::after {
  border: 0;
}

.qiaobao-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 14rpx 4rpx 0;
}

.qiaobao-hide-hint {
  color: #9a94a3;
  font-size: 20rpx;
}

.qiaobao-human-link {
  color: #7034dc;
  font-size: 22rpx;
  font-weight: 600;
}

@keyframes qiaobao-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8rpx) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes qiaobao-mask-in {
  from {
    background: rgba(20, 16, 29, 0);
  }

  to {
    background: rgba(20, 16, 29, .52);
  }
}

@keyframes qiaobao-sheet-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes qiaobao-curious {

  0%,
  100% {
    transform: rotate(0);
  }

  32% {
    transform: rotate(2deg);
  }

  68% {
    transform: rotate(-1deg);
  }
}

@keyframes qiaobao-dots {

  0%,
  100% {
    opacity: .35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes qiaobao-edge-in-right {
  from {
    opacity: 0;
    transform: translateX(54rpx);
  }

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

@keyframes qiaobao-edge-in-left {
  from {
    opacity: 0;
    transform: translateX(-54rpx);
  }

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

@media (prefers-reduced-motion: reduce) {

  .qiaobao-bubble,
  .qiaobao-mask,
  .qiaobao-sheet,
  .qiaobao-edge-tab,
  .is-scratching {
    animation: none !important;
  }
}
</style>