/* assets/chat.css 鈥斺€?鑱婂ぉ鐣岄潰鏍峰紡
 * -----------------------------------------------------------
 * 缂栫爜锛歎TF-8
 * 鏃犵涓夋柟渚濊禆锛岀函鍘熺敓 CSS
 *
 * 璁捐鍘熷垯锛?
 * - 娓愬彉鏂瑰悜缁熶竴 135deg
 * - 鍔ㄧ敾涓€寰?鈮?50ms锛屽彧鐢?transform/opacity
 * - 灏婇噸 prefers-reduced-motion锛堢敤鎴峰叧浜嗗姩鐢诲氨涓嶆挱锛?
 * - 瀹㈡湇宸ュ叿瑕?绋?锛屽姩鐢绘槸杈呭姪涓嶆槸涓昏
 */

/* ==================== 鍏ㄥ眬閲嶇疆 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
    background: #f5f5f5;
    -webkit-font-smoothing: antialiased;
}

/* 宓屽叆妯″紡锛歨tml + body 閮介€忔槑锛岃鐖堕〉闈㈣儗鏅€忚繃鏉ワ紙opacity 鎵嶈兘鐢熸晥锛?*/
body.kefu-embed {
    background: transparent;
    /* 绐楀彛浣滀负娴眰缁勪欢灞呬腑鏄剧ず锛岄伩鍏嶈创椤?璐磋竟鍍?鏁撮〉" */
    display: flex;
    align-items: center;
    justify-content: center;
    /* iframe 鍐呬笉鐣欑櫧杈广€佷笉婊氬姩锛屾潨缁?鏁翠釜椤甸潰"鐨勮鎰?*/
    margin: 0;
    padding: 0;
    overflow: hidden;
}
html:has(body.kefu-embed),
html.kefu-embed-root {
    /* !important 闃插尽锛氫换浣曟柇鐐?瑕嗙洊瑙勫垯锛堝惈鏈潵鏂板鐨勭Щ鍔ㄦ柇鐐圭櫧搴曪級閮戒笉寰楃洊浣忓祵鍏ラ€忔槑 */
    background: transparent !important;
}

/* 灏婇噸鐢ㄦ埛鐨勫噺灏戝姩鐢诲亸濂?*/
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 鑱婂ぉ绐楀彛 ==================== */
.kefu-window {
    width: var(--win-w, 360px);
    height: var(--win-h, 520px);
    max-width: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    /* 鑳屾櫙鐢ㄥ崐閫忔槑鐧藉苟璺熼殢閰嶇疆锛氭棦鏈?opacity 鏁翠綋鍙樻贰锛岃儗鏅篃涓嶈兘鏄笉閫忔槑鐧斤紙鍚﹀垯宓屾繁鑹插涓绘椂=鐧界罕锛?*/
    background: rgba(255, 255, 255, var(--win-opacity, 0.95));
    border-radius: 12px;
    /* 澶氬眰绔嬩綋闃村奖锛? 4px 12px + 0 12px 32px */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /* 绐楀彛鎵撳紑锛氱缉鏀炬贰鍏?*/
    animation: kefu-window-in var(--win-anim-dur, 200ms) ease-out;
    /* 涓嶉€忔槑搴︼細鏁翠釜绐楀彛鍙樻贰锛堢敤鎴疯鐨勬晥鏋滐級 */
    opacity: var(--win-opacity, 0.95);
}

/* 姣涚幓鐠冩晥鏋滐細backdrop-filter 鍦ㄩ儴鍒嗘棫娴忚鍣ㄥ拰璺ㄥ煙 iframe 涓嬪彲鑳藉け鏁堬紝鍋氶檷绾?*/
.kefu-window--glass {
    backdrop-filter: blur(var(--win-blur, 12px));
    -webkit-backdrop-filter: blur(var(--win-blur, 12px));
}

/* 宓屽叆妯″紡锛氳法鍩?iframe 涓?backdrop-filter 鏃犳硶妯＄硦鐖堕〉闈㈠唴瀹癸紝绂佺敤閬垮厤娓叉煋寮傚父 */
body.kefu-embed .kefu-window--glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 闄嶇骇锛氭祻瑙堝櫒涓嶆敮鎸?backdrop-filter 鏃讹紝鐢ㄥ崐閫忔槑鑳屾櫙鏇夸唬锛園supports 妫€娴嬶級 */
@supports not (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: none) {
    .kefu-window--glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@keyframes kefu-window-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* 娑堟伅鍏ュ満鍔ㄧ敾鏃堕暱璺熼殢閰嶇疆 */
@keyframes kefu-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================== 椤堕儴鏍?==================== */
.kefu-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    /* 娓愬彉鑳屾櫙锛氫富棰樿壊 鈫?鎻愪寒 22%锛?-theme-bright 鐢?index.php 娉ㄥ叆锛?*/
    background: linear-gradient(135deg, var(--theme-color), var(--theme-bright));
    color: var(--theme-text, #fff);
    flex-shrink: 0;
    /* 搴曢儴 1px 娴呰壊鍒嗛殧绾?*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.kefu-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.kefu-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

/* 鍏抽棴/鏀惰捣鎸夐挳锛氱偣鍑诲尯鍩?鈮?2脳32锛宧over 鍙嶉锛屼笉閿€姣佷細璇?*/
.kefu-close-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: var(--theme-text, #fff);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.kefu-close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.kefu-close-btn:active {
    background: rgba(255, 255, 255, 0.55);
}

.kefu-name {
    font-size: 15px;
    font-weight: 600;
}

.kefu-status {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    align-items: center;
}

.kefu-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CAF50;
    margin-right: 4px;
    animation: kefu-pulse 2s infinite;
}

@keyframes kefu-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ==================== 娑堟伅鍖?==================== */
.kefu-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    background: rgba(245, 245, 245, var(--win-opacity, 0.95));
    -webkit-overflow-scrolling: touch;
}

/* 婊氬姩鏉＄編鍖?*/
.kefu-messages::-webkit-scrollbar {
    width: 5px;
}
.kefu-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.kefu-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* ==================== 娑堟伅椤?==================== */
.kefu-msg {
    display: flex;
    margin-bottom: 12px;
    /* 娑堟伅鍏ュ満锛氫笅绉?+ 娣″叆 */
    animation: kefu-msg-in calc(var(--win-anim-dur, 200ms) * 0.75) ease-out;
}

@keyframes kefu-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kefu-msg-user {
    justify-content: flex-end;
}

.kefu-msg-ai {
    justify-content: flex-start;
    align-items: flex-end;
}

/* AI 澶村儚锛堣亰澶╁浘鏍囷紝鍐呰仈 SVG锛?*/
.kefu-ai-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    margin-right: 8px;
    margin-bottom: 2px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-color, #1A73E8);
}

.kefu-ai-avatar svg {
    width: 16px;
    height: 16px;
}

/* ==================== 姘旀场 ==================== */
.kefu-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.kefu-bubble-user {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-bright));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.kefu-bubble-ai {
    background: #fff;
    color: #333;
    border: 1px solid #e8e8e8;
    border-bottom-left-radius: 4px;
    /* 鏋佹祬闃村奖锛屽鍔犵珛浣撴劅 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ==================== 姝ｅ湪杈撳叆鎸囩ず鍣?==================== */
.kefu-typing-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.kefu-typing-bubble span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bbb;
    animation: kefu-typing 1.4s infinite;
}

.kefu-typing-bubble span:nth-child(2) { animation-delay: 0.2s; }
.kefu-typing-bubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes kefu-typing {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
    30%           { transform: translateY(-5px); opacity: 1;   }
}

/* ==================== P2-1锛歍TS 鏈楄鎸夐挳 + 鑷姩鏈楄寮€鍏?==================== */
/* 鑷姩鏈楄寮€鍏筹紙椤堕儴鏍忥紝涓庢渶灏忓寲鎸夐挳骞舵帓锛?*/
.kefu-tts-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: var(--theme-text, #fff);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.kefu-tts-toggle:hover {
    background: rgba(255, 255, 255, 0.4);
}

.kefu-tts-toggle:active {
    background: rgba(255, 255, 255, 0.55);
}

/* 鏈楄鍥炬爣鎸夐挳锛圓I 姘旀场澶栧彸渚э紝鍨傜洿灞呬腑锛?*/
.kefu-tts-icon {
    flex-shrink: 0;
    align-self: center;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    opacity: 0.75;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
}

.kefu-tts-icon:hover {
    opacity: 1;
    color: #666;
}

/* 播放中：停止符 + "朗读中"文字 + 主题色脉冲 */
.kefu-tts-icon--playing {
    color: var(--theme-color, #1A73E8);
    opacity: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 2px 5px;
    animation: kefu-tts-pulse 1.2s infinite;
}

.kefu-tts-icon--playing:hover {
    color: #e8404e;
}

.kefu-tts-icon-text {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes kefu-tts-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* 移动端（无 hover）：默认稍明显 */
@media (hover: none) {
    .kefu-tts-icon {
        opacity: 0.55;
    }
}

/* Level 4：设备不可用 toast */
.kefu-tts-toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.kefu-tts-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 展开态：完整表单 */
.kefu-lead--expanded {
    max-height: 500px;
    padding: 12px 16px;
    position: relative;
}

.kefu-lead-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    color: #999;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.kefu-lead-close:hover {
    background: rgba(0,0,0,0.12);
    color: #666;
}

.kefu-lead-title {
    font-size: 13px;
    color: var(--theme-color, #1677ff);
    margin-bottom: 8px;
    line-height: 1.4;
    padding-right: 28px;
}

.kefu-lead--collapsed .kefu-lead-title {
    display: none;
}

/* 闅愯棌鎬?*/
.kefu-lead--hidden {
    display: none;
}

/* 鍐呭瀹瑰櫒鏄鹃殣瑙勫垯锛堝洓绉嶇姸鎬佷簰鏂ワ紝鍙樉绀鸿鐘舵€佺殑鍐呭锛?*/
/* 榛樿闅愯棌鎵€鏈夊唴瀹瑰鍣?*/
.kefu-lead .kefu-lead-collapsed-content,
.kefu-lead .kefu-lead-expanded-content,
.kefu-lead .kefu-lead-success-content {
    display: none;
}

/* 鎶樺彔鎬侊細鍙樉绀烘姌鍙犲唴瀹?*/
.kefu-lead--collapsed .kefu-lead-collapsed-content {
    display: flex;
}
.kefu-lead--collapsed .kefu-lead-expanded-content,
.kefu-lead--collapsed .kefu-lead-success-content {
    display: none;
}

/* 灞曞紑鎬侊細鍙樉绀哄睍寮€鍐呭 */
.kefu-lead--expanded .kefu-lead-expanded-content {
    display: block;
}
.kefu-lead--expanded .kefu-lead-collapsed-content,
.kefu-lead--expanded .kefu-lead-success-content {
    display: none;
}

/* 鎴愬姛鎬侊細鍙樉绀烘垚鍔熷唴瀹?*/
.kefu-lead--success .kefu-lead-success-content {
    display: flex;
}
.kefu-lead--success .kefu-lead-collapsed-content,
.kefu-lead--success .kefu-lead-expanded-content {
    display: none;
}

/* 鎻愪氦鎴愬姛纭鎬?*/
.kefu-lead--success {
    max-height: 60px;
    padding: 14px 16px;
    background: var(--theme-soft, rgba(22, 119, 255, 0.06));
    border-top: 1px solid color-mix(in srgb, var(--theme-color, #1677ff) 20%, transparent);
    font-size: 13px;
    color: var(--theme-color, #1677ff);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kefu-lead--success .kefu-lead-close {
    position: static;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: color-mix(in srgb, var(--theme-color, #1677ff) 10%, transparent);
    color: var(--theme-color, #1677ff);
    font-size: 13px;
}

.kefu-lead--success .kefu-lead-close:hover {
    background: color-mix(in srgb, var(--theme-color, #1677ff) 18%, transparent);
}

.kefu-input-field {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 6px;
    outline: none;
    transition: border-color var(--win-anim-dur, 200ms) ease, box-shadow var(--win-anim-dur, 200ms) ease;
}

.kefu-input-field:focus {
    border-color: var(--theme-color, #1A73E8);
    box-shadow: 0 0 0 2px var(--theme-soft, rgba(22,119,255,0.12));
    background: var(--theme-soft, #fff);
}

.kefu-lead-btn {
    width: 100%;
    padding: 8px;
    background: linear-gradient(135deg, var(--theme-color), var(--theme-bright));
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--win-anim-dur, 200ms) ease, transform var(--win-anim-dur, 200ms) ease, box-shadow var(--win-anim-dur, 200ms) ease;
}

.kefu-lead-btn:hover {
    background: linear-gradient(135deg, var(--theme-hover, #146be6), var(--theme-bright, #4d9aff));
    transform: scale(1.02);
}

.kefu-lead-btn:active {
    transform: scale(0.97);
}

.kefu-lead-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 鎵嬪姩鐣欒仈绯绘柟寮忓叆鍙?*/
.kefu-lead-manual {
    display: block;
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--theme-color, #1A73E8);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.kefu-lead-manual:hover {
    color: var(--theme-hover, #146be6);
    text-decoration: underline;
}

/* ==================== 杈撳叆鍖?==================== */
.kefu-input-area {
    display: flex;
    align-items: flex-end;
    padding: 8px 12px;
    background: rgba(255, 255, 255, var(--win-opacity, 0.95));
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
    gap: 8px;
}

.kefu-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    max-height: 100px;
    outline: none;
    font-family: inherit;
    transition: border-color var(--win-anim-dur, 200ms) ease, box-shadow var(--win-anim-dur, 200ms) ease;
    min-height: 44px;
}

.kefu-input:focus {
    border-color: var(--theme-color, #1A73E8);
    box-shadow: 0 0 0 2px var(--theme-soft, rgba(22,119,255,0.12));
    background: var(--theme-soft, #fff);
}

.kefu-send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: linear-gradient(135deg, var(--theme-color), var(--theme-bright));
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* 鐐瑰嚮鍙嶉锛歨over 寰姮銆乤ctive 寰缉銆佺偣鍑绘稛婕?*/
    transition: background var(--win-anim-dur, 200ms) ease,
                transform var(--win-anim-dur, 200ms) ease,
                box-shadow var(--win-anim-dur, 200ms) ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color, #1677ff) 35%, transparent);
}

.kefu-send-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
}

/* Hover锛氬井鏀惧ぇ + 闃村奖鍔犳繁 */
.kefu-send-btn:hover:not(:disabled) {
    transform: scale(1.06);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-color, #1677ff) 40%, transparent);
}

/* Active锛氳交寰缉灏?*/
.kefu-send-btn:active:not(:disabled) {
    transform: scale(0.94);
    box-shadow: 0 1px 6px color-mix(in srgb, var(--theme-color, #1677ff) 30%, transparent);
}

/* 鐐瑰嚮娑熸吉鍔ㄧ敾 */
.kefu-send-btn .kefu-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: kefu-ripple-anim var(--win-anim-dur, 200ms) ease-out forwards;
    pointer-events: none;
    z-index: 0;
}

@keyframes kefu-ripple-anim {
    0%   { transform: scale(0);   opacity: 0.6; }
    100% { transform: scale(2.5); opacity: 0;   }
}

/* 鑴夊啿鍔ㄧ敾锛堝彂閫佸悗鐭殏鑴夊啿锛岀‘璁ょ敤鎴风偣鍒颁簡锛?*/
.kefu-send-btn.kefu-send--pulse {
    animation: kefu-send-pulse var(--win-anim-dur, 200ms) ease-out;
}

@keyframes kefu-send-pulse {
    0%   { box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color, #1677ff) 35%, transparent); }
    40%  { box-shadow: 0 2px 20px color-mix(in srgb, var(--theme-color, #1677ff) 60%, transparent); }
    100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color, #1677ff) 35%, transparent); }
}

/* 绂佺敤鎬?*/
.kefu-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ==================== 绉诲姩绔嚜閫傚簲锛?768px 鍏ㄥ睆锛?==================== */
@media (max-width: 768px) {
    /* 鍙椤跺眰鐩存帴璁块棶鐢熸晥锛氬祵鍏ユā寮忎笅 iframe 鍐呴儴瑙嗗彛閫氬父 <768px锛堝 kefu.js 鐨?360px 瀹?iframe锛夛紝
       鑻ュ湪杩欓噷鎶?html 璁剧櫧搴?/ 鎶婄獥鍙ｆ媺婊★紝浼氱牬鍧忋€岄€忔槑閫忓嚭 + 绐楀彛褰㈡€併€嶇殑宓屽叆鏁堟灉锛?
       鍥犳鍏ㄩ儴鐢?html:not(.kefu-embed-root) 鎺掗櫎宓屽叆妯″紡銆?*/
    html:not(.kefu-embed-root) {
        background: #fff;
    }

    html:not(.kefu-embed-root) .kefu-window {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        /* 娉ㄦ剰锛氫笉瑕佸湪杩欓噷璁?opacity:1 鎴?background:#fff锛?
           鍚﹀垯绐勫睆涓嬬獥鍙ｉ€忔槑搴﹂厤缃け鏁堬紙iframe 瀹藉害鏈韩绾?380px 浼氬懡涓鏂偣锛?*/
    }

    .kefu-bubble {
        max-width: 82%;
    }

    .kefu-input {
        font-size: 16px; /* 闃?iOS 鑷姩鏀惧ぇ */
    }

    /* 椤堕儴鏍忛伩寮€鍒樻捣/鐘舵€佹爮瀹夊叏鍖猴紝纭繚鍏抽棴鎸夐挳鍙偣 */
    .kefu-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
}
/* ==================== 鐩存帴璁块棶妯″紡鎮诞鐞?==================== */
.kefu-float-ball {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-color, #1677ff), var(--theme-bright, #4d9aff));
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--win-anim-dur, 200ms) ease, box-shadow var(--win-anim-dur, 200ms) ease;
    animation: kefu-window-in var(--win-anim-dur, 200ms) ease-out;
}

.kefu-float-ball:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.kefu-float-ball:active {
    transform: scale(0.96);
}