/**
 * 悬浮客服按钮 —— 可拖动 + 下拉菜单（配套 chat-fab.js）
 *
 * ⚠️ 各页面已经各自内联了 .chat-fab 的基础样式（position/size/配色），
 *    本文件负责：
 *    1. 拖动交互所需的样式
 *    2. 下拉菜单的完整视觉
 *
 * ⚠️ 加载顺序：本文件在页面内联 <style> 之后加载，
 *    靠 CSS 层叠顺序覆盖同名属性。
 */

/* ================================================================
 * 1) 拖动交互
 * ================================================================ */

.chat-fab {
    /* ⚠️ 必须！否则移动端拖动会变成页面滚动 */
    touch-action: none;
    /* 拖动过程中用 transform，不触发 layout，滑动更跟手 */
    will-change: transform;
    /* 松手后的回弹 */
    transition: transform .18s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* ⚠️ 按钮元素自带的默认样式要清掉 —— 它现在是菜单触发器，不是链接 */
    padding: 0;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* 拖动中：放大一点 + 阴影加深，暗示「拿起来了」 */
.chat-fab.is-dragging {
    transition: none;
    box-shadow: 0 10px 26px #000a;
}

/* 拖动时提到最上层，避免被底部导航压住 */
.chat-fab.is-dragging,
.chat-fab:active {
    z-index: 30;
}

/* 键盘聚焦时给出可见轮廓（无障碍） */
.chat-fab:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: 3px;
}

/*
 * 减少动态效果的用户偏好：
 * 取消放大/回弹动画，但**不取消拖动功能**。
 */
@media (prefers-reduced-motion: reduce) {
    .chat-fab,
    .chat-fab.is-dragging {
        transition: none;
    }
}

/* ================================================================
 * 2) 下拉菜单
 * ================================================================ */

/*
 * 菜单容器
 * ----------------------------------------------------------------
 * ⚠️ 菜单**不随按钮一起移动** —— 它固定在按钮上方，
 *    用 JS 计算按钮当前位置来定位（JS 里做定位，CSS 只管长相）。
 */
.chat-fab-menu {
    position: fixed;
    z-index: 40;
    width: 268px;
    padding: 0;
    overflow: hidden;
    /* 玻璃拟态 + 深色渐变，营造「悬浮面板」的层次感 */
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(31, 41, 55, .97) 0%, rgba(17, 24, 39, .98) 100%);
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 1px 0 0 rgba(255, 255, 255, .06) inset;
    /* 进场动画：opacity + translateY + scale */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.96);
    transform-origin: bottom right;
    transition:
        opacity .22s cubic-bezier(.22, 1, .36, 1),
        transform .28s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear .28s;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
}

/* 打开状态 */
.chat-fab-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity .2s cubic-bezier(.22, 1, .36, 1),
        transform .3s cubic-bezier(.22, 1, .36, 1),
        visibility 0s;
}

/*
 * 菜单在按钮**下方**时（按钮被拖到屏幕顶部）
 * → 变换原点翻到顶部，动画方向才对应
 */
.chat-fab-menu.is-below {
    transform-origin: top right;
}

.chat-fab-menu.is-below.is-open {
    transform: translateY(0) scale(1);
}

/*
 * 菜单顶部：标题栏
 * 带一条从左到右的渐变高光，视觉上把头部和列表区分开。
 */
.chat-fab-menu-head {
    position: relative;
    padding: 14px 16px 12px;
    background: linear-gradient(180deg, rgba(234, 179, 8, .10), transparent);
}

.chat-fab-menu-head::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(234, 179, 8, .28) 22%,
        rgba(59, 130, 246, .28) 70%,
        transparent
    );
    content: "";
}

.chat-fab-menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #f9fafb;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* 标题前的小圆点（呼吸光晕） */
.chat-fab-menu-title::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
    content: "";
    animation: fab-pulse 2.4s ease-in-out infinite;
}

@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, .06); }
}

/* 菜单主体 */
.chat-fab-menu-list {
    margin: 0;
    padding: 6px;
    list-style: none;
}

/*
 * 菜单项
 * ----------------------------------------------------------------
 * 每一项是一个「图标 + 文字 + 箭头」的卡片。
 */
.chat-fab-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.chat-fab-menu-item + .chat-fab-menu-item {
    /* 项与项之间一条极淡的分隔线 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.chat-fab-menu-item:hover {
    background: rgba(255, 255, 255, .055);
}

.chat-fab-menu-item:active {
    transform: scale(.975);
    background: rgba(255, 255, 255, .085);
}

.chat-fab-menu-item:focus-visible {
    outline: 2px solid #eab308;
    outline-offset: -2px;
}

/* 图标容器 —— 渐变底 + 内发光 */
.chat-fab-menu-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    box-shadow:
        0 4px 12px -4px rgba(0, 0, 0, .6),
        0 1px 0 0 rgba(255, 255, 255, .16) inset;
}

.chat-fab-menu-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 在线客服 —— 蓝色渐变 */
.chat-fab-menu-icon.is-chat {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* 通知 —— 琥珀渐变 */
.chat-fab-menu-icon.is-bell {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* 文字块 */
.chat-fab-menu-text {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.chat-fab-menu-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #f3f4f6;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
}

/* 「新消息」小红点徽标 */
.chat-fab-menu-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 8px -2px rgba(239, 68, 68, .8);
}

.chat-fab-menu-desc {
    overflow: hidden;
    color: #9ca3af;
    font-size: 11.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧箭头 */
.chat-fab-menu-arrow {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: #4b5563;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease, color .18s ease;
}

.chat-fab-menu-item:hover .chat-fab-menu-arrow {
    color: #9ca3af;
    transform: translateX(2px);
}

/*
 * 菜单底部：一条渐变装饰线 + 状态文案
 */
.chat-fab-menu-foot {
    padding: 9px 16px 11px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    color: #6b7280;
    font-size: 10.5px;
    line-height: 1.5;
    text-align: center;
}

.chat-fab-menu-foot b {
    color: #9ca3af;
    font-weight: 600;
}

/*
 * 指向按钮的小尖角
 * ⚠️ 位置由 JS 根据按钮位置设置 CSS 变量 --fab-x / --fab-y。
 */
.chat-fab-menu-arrow-tip {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #151d2b;
    content: "";
    transform: rotate(45deg);
}

/* 右上角的尖角要在旋转后仍与面板边框对齐，做个微调 */
.chat-fab-menu.is-open .chat-fab-menu-arrow-tip {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
}

/*
 * 遮罩层
 * ----------------------------------------------------------------
 * 点外面关闭菜单。必须**完全透明** —— 它的作用只是拦截点击，
 * 不能挡住用户的视觉。
 */
.chat-fab-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.chat-fab-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}

/*
 * 减少动态效果：取消所有动画，但仍可正常开合。
 */
@media (prefers-reduced-motion: reduce) {
    .chat-fab-menu,
    .chat-fab-menu-backdrop,
    .chat-fab-menu-item,
    .chat-fab-menu-arrow,
    .chat-fab-menu-title::before {
        transition: none;
        animation: none;
    }
}