/**
 * 移动端底部栏 - 一键拨号（双风格，后台可切换）
 *
 * 风格说明：
 *   - style-capsule 悬浮胶囊：不贴边圆角浮层 + 投影 + 绿色呼吸光晕，精致现代（默认）
 *   - style-bar    通栏白条：贴屏幕底边 + 白底 + 绿色拨号块 + 透明度呼吸 + 脉冲波纹
 *   切换入口：后台 网站设置 → 移动端底部固定栏按钮 → 显示风格
 *
 * 显示控制（重要）：
 *   本站 viewport 固定为 width=1440（手机上整体缩放显示桌面版），
 *   CSS 媒体查询在手机上永远不触发。由 header.php 设备检测脚本给 <html>
 *   加 .mobile-device class，这里据此显示。
 *
 * 尺寸适配（重要）：
 *   手机上页面整体被缩小（约 0.27 倍）。header.php 脚本计算
 *   --mcb-zoom = 1440 / 真实设备宽度，本文件所有尺寸乘以该变量，
 *   保证组件在手机屏幕上呈现正常物理大小。
 */

.mobile-call-bar {
    display: none;
}

/* 缩放变量默认值：JS 异常时按常见手机（390px 宽）估算 */
html.mobile-device {
    --mcb-zoom: 3.7;
}

/* ============ 通用容器（两种风格共用） ============ */
html.mobile-device .mobile-call-bar {
    display: block;
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    /* 滚动隐藏：使用 transform 过渡，GPU 加速不触发重排 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    will-change: transform;
}

/* 滚动时隐藏：向下移出屏幕并淡出 */
html.mobile-device .mobile-call-bar.is-hidden {
    transform: translateY(180%);
    opacity: 0;
}

/* 给页面底部留出空间（取两种风格的最大高度 + 悬浮间距，统一处理） */
html.mobile-device body {
    padding-bottom: calc(84px * var(--mcb-zoom, 3.7) + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============ 列表与按钮（两种风格共用） ============ */
html.mobile-device .mobile-call-bar ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html.mobile-device .mobile-call-bar ul li {
    flex: 1 1 auto;
    text-align: center;
    position: relative;
    height: 100%;
}

/* 按钮链接：默认竖排（图标上文字下），拨号为横排（见下方） */
html.mobile-device .mobile-call-bar ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #555;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

html.mobile-device .mobile-call-bar ul li a:active {
    opacity: 0.88;
}

/* 通用图标 */
html.mobile-device .mobile-call-bar ul li .mcb-icon {
    display: block;
    width: calc(22px * var(--mcb-zoom, 3.7));
    height: calc(22px * var(--mcb-zoom, 3.7));
    flex-shrink: 0;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 留言/微信按钮文字 */
html.mobile-device .mobile-call-bar ul li span {
    display: block;
    font-size: calc(12px * var(--mcb-zoom, 3.7));
    line-height: 1.2;
    color: #666;
}

/* ---- 在线留言 - 浅灰图标 ---- */
html.mobile-device .mobile-call-bar ul li.mcb-message .mcb-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* ---- 微信咨询 - 浅灰图标（后台默认关闭） ---- */
html.mobile-device .mobile-call-bar ul li.mcb-wechat .mcb-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M8.5 13.5A1.5 1.5 0 1 1 10 12a1.5 1.5 0 0 1-1.5 1.5zm7 0A1.5 1.5 0 1 1 17 12a1.5 1.5 0 0 1-1.5 1.5zm-3.5 8c-4.97 0-9-3.58-9-8s4.03-8 9-8 9 3.58 9 8c0 .6-.08 1.18-.22 1.74.76.4 1.42.95 1.94 1.61-.04-.27-.06-.55-.06-.83 0-3.31-3.13-6-7-6s-7 2.69-7 6 3.13 6 7 6c.78 0 1.53-.1 2.22-.29.55.65 1.24 1.18 2.03 1.55-.8.45-1.7.74-2.65.74-.28 0-.55-.02-.82-.05-.56.52-1.26.88-2.03 1.02.18-.35.28-.74.28-1.15 0-.16-.02-.31-.05-.46z'/%3E%3C/svg%3E");
}

/* ---- 一键拨号：白色电话图标 + 号码（两种风格共用） ---- */
html.mobile-device .mobile-call-bar ul li.mcb-call a {
    flex-direction: row;
    gap: calc(8px * var(--mcb-zoom, 3.7));
    background: linear-gradient(135deg, #2dbe5e 0%, #25a64d 100%);
}

html.mobile-device .mobile-call-bar ul li.mcb-call .mcb-icon {
    width: calc(24px * var(--mcb-zoom, 3.7));
    height: calc(24px * var(--mcb-zoom, 3.7));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* 号码文字：白色加粗，手机上呈现约 18 逻辑像素 */
html.mobile-device .mobile-call-bar ul li.mcb-call .mcb-num {
    color: #ffffff;
    font-size: calc(18px * var(--mcb-zoom, 3.7));
    font-weight: 700;
    letter-spacing: calc(0.5px * var(--mcb-zoom, 3.7));
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* 点击拨号后暂停动画 */
html.mobile-device .mobile-call-bar ul li.mcb-call.is-paused a {
    animation-play-state: paused;
}

/* ================================================================
 * 风格一：style-capsule 悬浮胶囊（默认）
 * 不贴边圆角浮层 + 投影 + 绿色呼吸光晕
 * ================================================================ */
html.mobile-device .mobile-call-bar.style-capsule {
    bottom: calc(16px * var(--mcb-zoom, 3.7));
    left: calc(16px * var(--mcb-zoom, 3.7));
    right: calc(16px * var(--mcb-zoom, 3.7));
    border-radius: calc(34px * var(--mcb-zoom, 3.7));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
}

html.mobile-device .mobile-call-bar.style-capsule ul {
    height: calc(60px * var(--mcb-zoom, 3.7));
    padding: calc(6px * var(--mcb-zoom, 3.7));
}

/* 留言按钮固定小宽度，给拨号让位 */
html.mobile-device .mobile-call-bar.style-capsule ul li.mcb-message {
    flex: 0 0 auto;
    width: calc(96px * var(--mcb-zoom, 3.7));
}

/* 分隔线：位于按钮间隙左侧 */
html.mobile-device .mobile-call-bar.style-capsule ul li + li::after {
    content: '';
    position: absolute;
    left: calc(-6px * var(--mcb-zoom, 3.7));
    top: 50%;
    transform: translateY(-50%);
    width: calc(1px * var(--mcb-zoom, 3.7));
    height: calc(24px * var(--mcb-zoom, 3.7));
    background: #ececec;
}

/* 胶囊内留言图标与文字间距 */
html.mobile-device .mobile-call-bar.style-capsule ul li.mcb-message .mcb-icon {
    margin-bottom: calc(3px * var(--mcb-zoom, 3.7));
}

/* 拨号按钮：圆角块 + 呼吸光晕 */
html.mobile-device .mobile-call-bar.style-capsule ul li.mcb-call a {
    border-radius: calc(28px * var(--mcb-zoom, 3.7));
    animation: mcb-glow 2.8s ease-in-out infinite;
}

/* ================================================================
 * 风格二：style-bar 通栏白条
 * 贴屏幕底边 + 白底 + 绿色拨号块 + 透明度呼吸 + 脉冲波纹
 * ================================================================ */
html.mobile-device .mobile-call-bar.style-bar {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    border-top: calc(1px * var(--mcb-zoom, 3.7)) solid #f0f0f0;
    /* iOS 安全区适配：贴边布局需留出 Home Indicator 区域 */
    padding-bottom: env(safe-area-inset-bottom);
}

html.mobile-device .mobile-call-bar.style-bar ul {
    height: calc(64px * var(--mcb-zoom, 3.7));
    padding: 0;
}

/* 分隔线：位于按钮右侧 */
html.mobile-device .mobile-call-bar.style-bar ul li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(1px * var(--mcb-zoom, 3.7));
    height: calc(28px * var(--mcb-zoom, 3.7));
    background: #ececec;
}

/* 通栏内留言图标与文字间距 */
html.mobile-device .mobile-call-bar.style-bar ul li.mcb-message .mcb-icon {
    margin-bottom: calc(3px * var(--mcb-zoom, 3.7));
}

/* 拨号按钮：整块绿色 + 透明度呼吸 */
html.mobile-device .mobile-call-bar.style-bar ul li.mcb-call {
    overflow: visible;
}
html.mobile-device .mobile-call-bar.style-bar ul li.mcb-call a {
    animation: mcb-breath 2.8s ease-in-out infinite;
}

/* 通栏风格专属：首次加载播放一次脉冲波纹 */
html.mobile-device .mobile-call-bar.style-bar ul li.mcb-call::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 70%;
    background: rgba(45, 190, 94, 0.35);
    border-radius: calc(6px * var(--mcb-zoom, 3.7));
    transform: translate(-50%, -50%) scale(1);
    animation: mcb-pulse-ring 1.5s ease-out 1;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}
html.mobile-device .mobile-call-bar.style-bar ul li.mcb-call.is-paused::before {
    animation: none;
    opacity: 0;
}

/* ============ 动画定义 ============ */
/* 胶囊呼吸光晕：绿色 glow 缓慢脉动（配合投影营造悬浮感） */
@keyframes mcb-glow {
    0%, 100% {
        box-shadow: 0 calc(4px * var(--mcb-zoom, 3.7)) calc(18px * var(--mcb-zoom, 3.7)) rgba(45, 190, 94, 0.45);
    }
    50% {
        box-shadow: 0 calc(6px * var(--mcb-zoom, 3.7)) calc(30px * var(--mcb-zoom, 3.7)) rgba(45, 190, 94, 0.28);
    }
}

/* 通栏呼吸：透明度在 0.92 ↔ 1.0 之间慢速脉动 */
@keyframes mcb-breath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.92; }
}

/* 通栏脉冲波纹：从按钮中心向外扩散并淡出，仅播放 1 次 */
@keyframes mcb-pulse-ring {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; }
}

/* ============ 无障碍：尊重系统"减少动效"偏好 ============ */
@media (prefers-reduced-motion: reduce) {
    html.mobile-device .mobile-call-bar,
    html.mobile-device .mobile-call-bar ul li.mcb-call a,
    html.mobile-device .mobile-call-bar ul li.mcb-call::before {
        animation: none !important;
        transition: none !important;
    }
    /* 即使 JS 加了 is-hidden 类，也强制保持可见 */
    html.mobile-device .mobile-call-bar.is-hidden {
        transform: none !important;
        opacity: 1 !important;
    }
}