/* ===== 在线客服（访客端）悬浮组件 ===== */
.chat-fab {
    position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom));
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; z-index: 9000;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    box-shadow: 0 6px 20px rgba(255, 87, 34, .45);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s;
}
.chat-fab:active { transform: scale(.92); }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab .chat-dot {
    position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px;
    background: #ff1744; color: #fff; font-size: 11px; font-weight: 700;
    display: none; align-items: center; justify-content: center; padding: 0 4px;
    border: 2px solid #fff; box-sizing: border-box;
}
.chat-fab.has-msg .chat-dot { display: flex; }
@keyframes chatPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.chat-panel {
    position: fixed; right: 10px; bottom: calc(148px + env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 20px)); height: 440px; max-height: calc(100vh - 180px);
    background: #fff; border-radius: 16px; z-index: 9001; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .25); display: none; flex-direction: column;
}
.chat-panel.open { display: flex; }
.chat-head {
    background: linear-gradient(90deg, #ff9800, #ff5722); color: #fff;
    padding: 12px 14px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.chat-head .chat-title { font-size: 14px; font-weight: 700; flex: 1; }
.chat-head .chat-status { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 4px; }
.chat-head .chat-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #69f0ae; }
.chat-close { background: rgba(255,255,255,.2); border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.chat-body { flex: 1; overflow-y: auto; padding: 12px; background: #f6f7f9; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 78%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.chat-msg .chat-time { display: block; font-size: 10px; opacity: .55; margin-top: 3px; }
.chat-msg.visitor { align-self: flex-end; background: #ff6f43; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.staff { align-self: flex-start; background: #fff; color: #333; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.chat-name-bar { padding: 8px 12px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.chat-name-bar input {
    width: 100%; border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; box-sizing: border-box;
}
.chat-name-bar input:focus { border-color: #ff6f43; }
.chat-input-bar { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
.chat-input-bar input { flex: 1; border: 1px solid #e5e5e5; border-radius: 999px; padding: 9px 14px; font-size: 13px; outline: none; box-sizing: border-box; }
.chat-input-bar input:focus { border-color: #ff6f43; }
.chat-input-bar button {
    border: none; background: linear-gradient(90deg, #ff9800, #ff5722); color: #fff;
    border-radius: 999px; padding: 0 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}