/* ============================================
   客服悬浮按钮 - 深浅色自适应 + 动画增强
   ============================================ */

:root {
    --kf-pink:    #f96c9f;
    --kf-orange:  #f39800;
    --kf-white:   #ffffff;
    --kf-text:    #2D1F33;
    --kf-text-2:  rgba(45,31,51,0.65);
    --kf-text-3:  rgba(45,31,51,0.4);
    --kf-bg:      #F5FAFC;
    --kf-border:  rgba(155,89,182,0.15);
    --kf-shadow2: 0 8px 32px rgba(155,89,182,0.12);
}

[data-theme="dark"] {
    --kf-pink:    #f96c9f;
    --kf-orange:  #f39800;
    --kf-white:   #1a1520;
    --kf-text:    #ffffff;
    --kf-text-2:  rgba(255,255,255,0.7);
    --kf-text-3:  rgba(255,255,255,0.4);
    --kf-bg:      #2a2530;
    --kf-border:  rgba(255,255,255,0.1);
    --kf-shadow2: 0 8px 32px rgba(0,0,0,0.3);
}

/* 客服悬浮按钮容器 */
.customer-service {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    animation: fadeInUp 0.6s ease-out;
}

/* 悬浮分享按钮 */
.float-share-btn {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    animation: fadeInUp 0.6s ease-out 0.1s both;
    font-size: 20px;
    color: #fff;
}

.float-share-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.5);
}

.float-share-btn:active {
    transform: scale(0.95);
}

[data-theme="dark"] .float-share-btn {
    box-shadow: 0 4px 25px rgba(102, 126, 234, 0.5);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 客服按钮 */
.service-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--kf-pink) 0%, var(--kf-orange) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(249,108,159,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-size: 24px;
}

/* 深色模式按钮样式 */
[data-theme="dark"] .service-btn {
    box-shadow: 0 4px 25px rgba(249,108,159,0.5);
}

.service-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 30px rgba(249,108,159,0.5);
}

.service-btn:active {
    transform: scale(0.95);
}

.service-btn i {
    color: #fff;
}

/* 脉冲动画 - 呼吸灯效果 */
.service-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse 2s ease-in-out infinite;
    z-index: -1;
}

/* 深色模式脉冲增强 */
[data-theme="dark"] .service-btn::before {
    animation: pulseDark 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.5; 
    }
    50% { 
        transform: scale(1.4); 
        opacity: 0; 
    }
}

@keyframes pulseDark {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.6; 
    }
    50% { 
        transform: scale(1.5); 
        opacity: 0; 
    }
}

/* 提示徽章 */
.service-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid var(--kf-white, #fff);
    animation: badgePulse 1.5s ease-in-out infinite;
}

[data-theme="dark"] .service-btn::after {
    border-color: #1e1e2e;
}

@keyframes badgePulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* 客服弹窗 */
.service-popup {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 280px;
    background: var(--kf-white);
    border: 1px solid var(--kf-border);
    border-radius: 20px;
    padding: 24px 20px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--kf-shadow2);
}

/* 深色模式弹窗 */
[data-theme="dark"] .service-popup {
    background: var(--kf-white);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.service-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* 弹窗箭头 */
.service-popup::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: var(--kf-white);
    border-right: 1px solid var(--kf-border);
    border-bottom: 1px solid var(--kf-border);
    transform: rotate(45deg);
}

[data-theme="dark"] .service-popup::after {
    border-color: rgba(255,255,255,0.1);
}

.service-popup-title {
    font-size: 1.05em;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kf-text);
}

.service-popup-title i {
    color: #07C160;
    font-size: 1.2em;
}

.service-popup-desc {
    font-size: 0.85em;
    color: var(--kf-text-2);
    margin-bottom: 16px;
    line-height: 1.5;
}

.service-qrcode {
    width: 150px;
    height: 150px;
    margin: 0 auto 16px;
    background: white;
    border-radius: 16px;
    padding: 10px;
    border: 1px solid var(--kf-border);
    transition: transform 0.3s ease;
}

.service-qrcode:hover {
    transform: scale(1.02);
}

.service-qrcode img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.service-popup-tip {
    font-size: 0.8em;
    color: var(--kf-text-2);
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.service-popup-tip::before {
    content: '🕐';
    font-size: 1em;
}

.service-phone {
    font-size: 0.85em;
    color: var(--kf-text-2);
    text-align: center;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


.service-phone a {
    color: var(--kf-primary);
    text-decoration: none;
    font-weight: 600;
}

.service-phone a:hover {
    text-decoration: underline;
}

.service-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--kf-bg);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kf-text-3);
    transition: all 0.25s ease;
    font-size: 12px;
}

.service-popup-close:hover {
    background: var(--kf-pink);
    color: white;
    transform: rotate(90deg);
}

/* 在线客服按钮 */
.service-online-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 0;
    margin-top: 8px;
    background: linear-gradient(135deg, #07C160 0%, #06AD56 100%);
    color: white;
    text-decoration: none;
    border-radius: 14px;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.service-online-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.service-online-btn:hover::before {
    left: 100%;
}

.service-online-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7, 193, 96, 0.4);
}

.service-online-btn:active {
    transform: translateY(0);
}

.service-online-btn i {
    font-size: 1em;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .customer-service {
        bottom: 116px;
        right: 16px;
    }
    
    .float-share-btn {
        bottom: 182px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .service-btn {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }
    
    .service-popup {
        width: 260px;
        right: -10px;
        padding: 20px 16px 16px;
    }
    
    .service-qrcode {
        width: 130px;
        height: 130px;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .customer-service,
    .service-btn,
    .service-popup,
    .service-btn::before,
    .service-btn::after,
    .service-popup-close,
    .service-online-btn {
        animation: none;
        transition: opacity 0.2s ease;
    }
}

/* 禁止移动端缩放 - iOS兼容 */
html {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
}

/* 允许输入框选择文字 */
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 禁止双击缩放 */
* {
    touch-action: manipulation;
}

/* iOS Safari 特定修复 */
@supports (-webkit-touch-callout: none) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}