/* 在线客服前台 widget 样式 */
.chat-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 99990;
    width: 56px; height: 56px; border-radius: 50%;
    background: #00c2a8; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,194,168,.45);
    font-size: 24px; border: none;
}
.chat-fab:hover { background: #00a892; }
.chat-fab.has-msg { animation: chat-badge 1s infinite; }
@keyframes chat-badge { 0%,100% { box-shadow: 0 4px 16px rgba(0,194,168,.45); } 50% { box-shadow: 0 0 0 6px rgba(0,194,168,.25); } }

.chat-popup-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 99991; display: none; align-items: center; justify-content: center;
}
.chat-popup-mask.show { display: flex; }
.chat-popup {
    background: #fff; border-radius: 12px; max-width: 360px; width: 90%;
    padding: 28px 24px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.chat-popup h3 { margin: 0 0 8px; font-size: 18px; color: #1a1a1a; }
.chat-popup p { color: #666; margin: 0 0 18px; font-size: 14px; }
.chat-popup .btn { margin: 0 6px; }

/* 面板：默认大窗口（左右两栏），small 切换为小浮窗 */
.chat-panel {
    position: fixed; right: 24px; bottom: 24px; z-index: 99992;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,.22);
    display: none; flex-direction: column; overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.chat-panel.show { display: flex; }
.chat-panel.large {
    width: 720px; max-width: 96vw; height: 560px; max-height: 88vh;
    left: 50%; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%); /* 页面正中显示，拖动后转为 left/top 定位 */
}
.chat-panel.small {
    width: 340px; max-width: 94vw; height: 480px; max-height: 80vh;
}
/* 头部始终在顶部，中间区(左聊天/右信息)并排 */
.chat-middle { display: flex; flex: 1; min-height: 0; }
.chat-panel.large .chat-middle { flex-direction: row; }
.chat-panel.small .chat-middle { flex-direction: column; }
.chat-panel__head {
    background: #00c2a8; color: #fff; padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto;
    cursor: move; user-select: none;
}
.chat-status { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.chat-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd8dc; display: inline-block; }
.chat-status .dot.online { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.3); }
.chat-status .dot.offline { background: #ffb300; }
.chat-panel__actions { display: flex; gap: 10px; }
.chat-panel__actions .act { cursor: pointer; font-size: 18px; line-height: 1; opacity: .9; }
.chat-panel__actions .act:hover { opacity: 1; }
.chat-panel__offline { background: #fff7e6; color: #ad6800; font-size: 12px; padding: 6px 14px; text-align: center; }
.chat-panel.large .chat-panel__offline { order: 0; }

/* 左侧聊天区 */
.chat-left { display: flex; flex-direction: column; flex: 1 1 58%; min-width: 0; min-height: 0; }
.chat-panel.small .chat-left { flex: 1 1 100%; }
.chat-panel__body { flex: 1; overflow-y: auto; padding: 14px; background: #f5f7fa; min-height: 0; }
.chat-panel__foot { padding: 10px; border-top: 1px solid #eee; display: flex; gap: 8px; background: #fff; }
.chat-panel__foot textarea { flex: 1; border: 1px solid #dfe3e8; border-radius: 8px; padding: 8px 10px; resize: none; font-size: 14px; outline: none; font-family: inherit; }
.chat-panel__foot textarea:focus { border-color: #00c2a8; }
.chat-panel__foot button { border: none; background: #00c2a8; color: #fff; border-radius: 8px; padding: 0 16px; cursor: pointer; font-size: 14px; }

.chat-start-form { display: none; flex-direction: column; gap: 8px; padding: 0 10px 8px; background: #fff; }
.chat-start-form.show { display: flex; }
.chat-start-form .sf-title { font-size: 12px; color: #888; }
.chat-start-form input { padding: 8px 10px; border: 1px solid #dfe3e8; border-radius: 8px; font-size: 14px; outline: none; }
.chat-link { font-size: 12px; color: #00c2a8; cursor: pointer; text-align: center; padding: 0 0 8px; background: #fff; }

/* 右侧信息区（仅大窗口显示） */
.chat-right { flex: 1 1 42%; background: linear-gradient(160deg,#00c2a8,#00a892); color: #fff; padding: 22px 18px; overflow-y: auto; }
.chat-panel.small .chat-right { display: none; }
.chat-right .info-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.chat-right .info-sub { font-size: 13px; opacity: .9; margin-bottom: 14px; letter-spacing: .5px; }
.chat-right .info-intro { font-size: 13px; line-height: 1.6; opacity: .95; margin-bottom: 16px; }
.chat-right .info-list { list-style: none; padding: 0; margin: 0; }
.chat-right .info-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; }
.chat-right .info-list .k { flex: 0 0 72px; opacity: .85; }
.chat-right .info-list .v { flex: 1; word-break: break-word; }
.chat-right .info-list .wa { color: #fff; text-decoration: underline; }

/* 消息行 */
.chat-row { display: flex; margin-bottom: 12px; align-items: flex-end; }
.chat-row.user { justify-content: flex-end; }
.chat-row.agent { justify-content: flex-start; }
.chat-row.system { justify-content: center; }
.chat-col { display: flex; flex-direction: column; max-width: 76%; }
.chat-row.user .chat-col { align-items: flex-end; }
.chat-row.agent .chat-col { align-items: flex-start; }
.chat-row .bubble { padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.chat-row.user .bubble { background: #00c2a8; color: #fff; border-bottom-right-radius: 3px; }
.chat-row.agent .bubble { background: #fff; color: #222; border: 1px solid #e6e9ed; border-bottom-left-radius: 3px; }
.chat-row.system .bubble { background: transparent; color: #999; font-size: 12px; text-align: center; max-width: 90%; }
.chat-meta { font-size: 11px; color: #bbb; margin-top: 3px; display: flex; gap: 8px; }
.chat-meta .read-receipt { color: #7fcfc0; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 600; flex: 0 0 34px; }
.chat-avatar.visitor { background: #00c2a8; margin-left: 8px; margin-bottom: 20px }
.chat-avatar.agent { background: #409eff; margin-right: 8px; margin-bottom: 20px}

/* 邀请/新消息提示（页面正中显示） */
.chat-toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99993;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
    padding: 14px 16px; width: 320px; max-width: 90vw;
}
.chat-toast .toast-title { font-weight: 700; color: #00a892; font-size: 14px; margin-bottom: 4px; }
.chat-toast .toast-msg { font-size: 13px; color: #444; margin-bottom: 10px; line-height: 1.5; }
.chat-toast .btn { background: #00c2a8; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 13px; }