.support-floating{position:fixed;right:24px;bottom:26px;z-index:140;font-family:"Microsoft YaHei","Segoe UI",sans-serif;letter-spacing:0}.support-floating svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.support-dock{width:58px;padding:5px;display:grid;gap:0;border:1px solid #d9e3ef;border-radius:29px;background:#fff;box-shadow:0 8px 28px #1e62ad33}.support-dock button,.support-dock a{position:relative;width:46px;height:48px;display:grid;place-items:center;border:0;border-bottom:1px solid #e9eef5;background:#fff;color:#7790bd;text-decoration:none;cursor:pointer}.support-dock>*:first-child{border-radius:23px 23px 0 0}.support-dock>*:last-child{border-bottom:0;border-radius:0 0 23px 23px}.support-dock>*:first-child:last-child{border-radius:23px}.support-dock button:hover,.support-dock a:hover{background:#f2f7ff;color:#2f73ff}.support-dock .support-chat-launch{margin-top:1px;border-radius:50%;background:#087bf5;color:#fff;box-shadow:0 5px 14px #087bf54d}.support-dock .support-chat-launch:hover{background:#006ee8;color:#fff}.support-dock .support-chat-launch svg{width:25px;height:25px}.support-unread{position:absolute;right:-3px;top:-2px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border:2px solid #fff;border-radius:9px;background:#f3485b;color:#fff;font-size:9px;font-weight:800}.support-unread.hidden{display:none}
.support-qr-card{position:absolute;right:72px;bottom:56px;width:190px;padding:16px;display:grid;justify-items:center;border:1px solid #d9e2ef;border-radius:8px;background:#fff;box-shadow:0 14px 38px #1c4d8b24;color:#2f4058;opacity:0;visibility:hidden;transform:translateX(8px);pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}.support-floating:hover .support-qr-card,.support-qr-card:hover{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}.support-qr-card::after{content:"";position:absolute;right:-7px;bottom:33px;width:12px;height:12px;transform:rotate(45deg);border-top:1px solid #d9e2ef;border-right:1px solid #d9e2ef;background:#fff}.support-qr-card img{width:154px;height:154px;object-fit:contain}
.support-window{position:absolute;right:76px;bottom:0;width:min(400px,calc(100vw - 112px));height:min(640px,calc(100vh - 52px));display:grid;grid-template-rows:68px minmax(0,1fr);overflow:hidden;border:1px solid #d9e3ef;border-radius:10px;background:#f4f7fb;box-shadow:0 24px 70px #142d5261;color:#27364a}.support-window.hidden{display:none}.support-window-head{position:relative;display:flex;align-items:center;gap:11px;padding:0 15px;background:linear-gradient(135deg,#1979f2,#0b68df);color:#fff}.support-agent-info{min-width:0;display:grid}.support-window-head strong{font-size:15px}.support-agent-info>span{font-size:10px;color:#dbeaff}.support-agent-info>span b{font-weight:700}.support-agent-info>span i{width:7px;height:7px;display:inline-block;margin-right:3px;border-radius:50%;background:#56e5a6;box-shadow:0 0 8px #56e5a6}.support-agent-info>span.offline i{background:#aebdce;box-shadow:none}.support-online-hours{position:absolute;right:49px;bottom:9px;color:#eef6ff;font-size:10px;line-height:1;white-space:nowrap}.support-agent-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#ffffff24}.support-agent-avatar svg{width:23px;height:23px}.support-window-head>button{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#eaf3ff;font-size:25px;cursor:pointer}.support-window-head>button:hover{background:#ffffff1f}.support-chat-body{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;background:#eef4fb}.support-login-state{min-height:0;display:grid;align-content:center;justify-items:center;padding:36px;text-align:center;background:#f5f8fc}.support-login-state.hidden{display:none}.support-login-state svg{width:50px;height:50px;margin-bottom:14px;color:#347df1}.support-login-state strong{font-size:15px}.support-login-state span{margin:6px 0 18px;color:#8090a5;font-size:11px}.support-login-state button{height:38px;padding:0 22px;border:0;border-radius:6px;background:#1676ed;color:#fff;font-weight:700;cursor:pointer}
.support-typing{height:31px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #d5e0eb;background:#f7f9fc;color:#54708d;font-size:10px}.support-typing.hidden{display:none}.support-typing-dots{display:flex;align-items:center;gap:3px}.support-typing-dots i{width:4px;height:4px;border-radius:50%;background:#3f88ed;animation:supportTyping 1s ease-in-out infinite}.support-typing-dots i:nth-child(2){animation-delay:.15s}.support-typing-dots i:nth-child(3){animation-delay:.3s}@keyframes supportTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.support-message-list{min-height:0;padding:17px 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.support-welcome{margin:2px auto 16px;padding:11px 14px;display:grid;gap:3px;border:1px solid #d8e4f1;border-radius:7px;background:#fff;color:#40536b;text-align:center;font-size:11px}.support-welcome span{color:#7f91a7;font-size:10px}.support-msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;margin:12px 0;align-items:end}.support-msg.user{grid-template-columns:minmax(0,1fr) 30px}.support-msg.user .support-msg-avatar{grid-column:2}.support-msg.user .support-msg-main{grid-column:1;grid-row:1;text-align:right}.support-msg-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#1978ee;color:#fff;font-size:11px;font-weight:800}.support-msg.user .support-msg-avatar{background:#5f7187}.support-msg-meta{margin:0 3px 4px;color:#8797aa;font-size:9px}.support-msg-bubble{display:inline-block;max-width:88%;padding:9px 11px;border:1px solid #dce5ef;border-radius:3px 9px 9px 9px;background:#fff;color:#2f4054;font-size:12px;line-height:1.55;text-align:left;white-space:pre-wrap;word-break:break-word;box-shadow:0 3px 12px #33557b0b}.support-msg.user .support-msg-bubble{border-color:#267aef;background:#267aef;color:#fff;border-radius:9px 3px 9px 9px}.support-msg-image{display:block;max-width:210px;max-height:210px;margin-top:7px;border-radius:5px;object-fit:contain;cursor:zoom-in}.support-msg-order{margin-top:7px;padding:8px 9px;border:1px solid #cbd9e9;border-radius:5px;background:#f3f7fc;color:#435b78;font-size:10px}.support-msg.user .support-msg-order{border-color:#ffffff42;background:#ffffff17;color:#fff}.support-msg-order strong{display:block;font-family:Consolas,monospace;font-size:11px}.support-message-empty{height:100%;display:grid;place-items:center;color:#8899ad;font-size:11px}
.support-order-bar{padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;border-top:1px solid #d9e3ee;background:#fff}.support-order-bar.hidden{display:none}.support-order-bar select{min-width:0;height:34px;padding:0 8px;border:1px solid #d0dbe8;border-radius:5px;background:#f7f9fc;color:#34475f;font-size:10px;outline:0}.support-order-bar button{height:34px;padding:0 11px;border:1px solid #b7cdf0;border-radius:5px;background:#edf4ff;color:#216bdc;font-size:10px;font-weight:700;cursor:pointer}.support-image-preview{position:relative;padding:8px 11px;border-top:1px solid #d9e3ee;background:#fff}.support-image-preview.hidden{display:none}.support-image-preview img{width:64px;height:54px;object-fit:cover;border:1px solid #ced9e5;border-radius:5px}.support-image-preview button{position:absolute;left:65px;top:3px;width:20px;height:20px;border:1px solid #d0d9e3;border-radius:50%;background:#fff;color:#6f7f91;cursor:pointer}.support-composer{padding:8px 10px;display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:7px;border-top:1px solid #d8e2ed;background:#fff}.support-composer>button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:6px;background:#eef3f9;color:#60758d;cursor:pointer}.support-composer>button:hover{background:#e2edfb;color:#2174eb}.support-composer textarea{box-sizing:border-box;width:100%;height:38px;min-height:38px;max-height:38px;padding:9px 10px;overflow:hidden;resize:none;border:1px solid #d2dce8;border-radius:6px;background:#f7f9fc;color:#25364a;font-family:inherit;font-size:12px;line-height:18px;outline:0}.support-composer textarea:focus{border-color:#4a91f5;box-shadow:0 0 0 3px #3e8bf314}.support-composer .support-send{background:#1576ef;color:#fff}.support-composer .support-send:hover{background:#0969dd;color:#fff}.support-error{margin:0;padding:7px 11px;border-top:1px solid #f1ccd0;background:#fff0f1;color:#c2434e;font-size:10px}.support-error.hidden{display:none}.support-lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:40px;background:#071221d9}.support-lightbox.hidden{display:none}.support-lightbox img{max-width:min(1100px,94vw);max-height:90vh;object-fit:contain}.support-lightbox button{position:absolute;right:20px;top:16px;width:40px;height:40px;border:1px solid #ffffff55;border-radius:50%;background:#16263ccc;color:#fff;font-size:26px;cursor:pointer}
@media(max-width:700px){.support-floating{right:12px;bottom:14px}.support-qr-card{display:none}.support-window{position:fixed;inset:10px;width:auto;height:auto;border-radius:9px}.support-dock{width:52px;border-radius:26px}.support-dock button,.support-dock a{width:40px;height:44px}.support-msg-bubble{max-width:94%}}

/* Official support rail: compact, squared, and distinct from a consumer chat bubble. */
.support-dock{width:56px;padding:5px;gap:0;border:1px solid #3a5069;border-radius:12px;background:#172435;box-shadow:0 12px 30px #07132180}
.support-dock button,.support-dock a{width:44px;height:42px;border-bottom:1px solid #30465d;background:transparent;color:#9fb4cb;border-radius:0}
.support-dock button:hover,.support-dock a:hover{background:#22374d;color:#dcecff}
.support-dock>*:first-child,.support-dock>*:last-child,.support-dock>*:first-child:last-child{border-radius:7px}
.support-dock .support-tool-button svg{width:19px;height:19px}
.support-dock .support-chat-launch{margin-top:4px;border:0;border-radius:8px;background:#1676ed;color:#fff;box-shadow:0 5px 14px #087bf54d}
.support-dock .support-chat-launch:hover{background:#2d88f7;color:#fff}
.support-dock .support-chat-launch svg{width:22px;height:22px}
.support-floating:hover .support-qr-card{opacity:0;visibility:hidden;transform:translateX(8px);pointer-events:none}
.support-floating:has(.support-qr-trigger:hover) .support-qr-card,.support-floating:hover .support-qr-card:hover{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
.support-qr-card{width:196px;padding:13px 0;overflow:hidden;background:#f8fbff;color:#26384e}
.support-qr-card>img{display:block;width:154px;height:154px;margin:0 auto 9px;object-fit:contain;background:#fff}
.support-qr-card>strong{display:block;color:#344b66;font-size:11px;font-weight:700;text-align:center;white-space:nowrap}
.support-qr-trigger{height:58px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.support-qr-trigger .qq-penguin-icon{display:block;width:24px;height:24px;object-fit:contain}
.support-qr-label{color:#9fb4cb;font-size:9px;line-height:1;white-space:nowrap}
.support-qr-trigger:hover .support-qr-label{color:#e7f2ff}
.support-msg-bubble.support-msg-recalled{border-style:dashed;background:#f5f7fa;color:#8290a1;font-size:10px;font-style:italic}.support-msg.user .support-msg-bubble.support-msg-recalled{border-color:#cdd7e2;background:#f5f7fa;color:#8290a1}

.support-composer{position:relative;grid-template-columns:34px 34px 34px minmax(0,1fr) 38px;align-items:center;gap:5px}
.support-composer>button{width:34px;height:38px}
.support-composer .support-send{width:38px}
.support-composer .support-order-bar{grid-column:1/-1;padding:0 0 7px;border:0;background:transparent}
.support-composer .support-order-toggle.active{background:#dceaff;color:#176fdf;box-shadow:inset 0 0 0 1px #b8d2f4}
.support-composer textarea{height:38px;min-height:38px;max-height:110px;transition:height .16s ease;overflow-y:hidden}
.support-input-wrap{position:relative;min-width:0;display:flex;align-items:stretch}
.support-input-wrap textarea{display:block}
.support-input-wrap.has-counter textarea{padding-bottom:23px}
.support-char-count{position:absolute;right:9px;bottom:5px;color:#8a98aa;font-size:9px;line-height:1;pointer-events:none;font-variant-numeric:tabular-nums}
.support-char-count[hidden]{display:none}

/* Keep only the message timeline flexible; the composer must stay content-sized. */
.support-chat-body{display:flex;flex-direction:column}
.support-message-list{flex:1 1 auto}
.support-client-emoji-picker{position:absolute;left:48px;bottom:54px;z-index:6;width:248px;padding:9px;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;border:1px solid #ced9e5;border-radius:7px;background:#fff;box-shadow:0 12px 34px #24456830}
.support-client-emoji-picker.hidden{display:none}
.support-client-emoji-picker button{width:27px;height:27px;padding:0;border:0;border-radius:4px;background:transparent;font-size:17px;line-height:1;cursor:pointer}
.support-client-emoji-picker button:hover{background:#eaf2fb}

.support-agent-icon{display:block;object-fit:contain}
.support-dock .support-chat-launch .support-agent-icon{width:34px;height:34px}
.support-agent-avatar{width:46px;height:46px;border:0;border-radius:10px;background:transparent;box-shadow:none}
.support-agent-avatar .support-agent-icon{width:46px;height:46px}
.support-msg-avatar{border-radius:7px;box-shadow:0 2px 7px #1b65c52b}
.support-msg.admin .support-msg-avatar{background:transparent;box-shadow:none}
.support-msg-avatar .support-agent-icon{width:32px;height:32px}
.support-msg.user .support-msg-avatar{border-radius:50%;box-shadow:none}

/* Keep customer and admin consoles on the same familiar chat-bubble system. */
.support-message-list{background:#e9eef3}
.support-msg{gap:9px;max-width:100%;margin:15px 0}
.support-msg-main{min-width:0;max-width:min(78%,300px)}
.support-msg.user .support-msg-main{margin-left:auto}
.support-msg-avatar,.support-msg.user .support-msg-avatar{width:30px;height:30px;margin-top:18px;align-self:start;border-radius:4px}
.support-msg-meta{margin:0 2px 5px;color:#778696}
.support-msg-bubble,.support-msg.user .support-msg-bubble{position:relative;padding:9px 12px;border:0;border-radius:5px;box-shadow:0 1px 2px #21364a24}
.support-msg.admin .support-msg-bubble{background:#fff;color:#25364a}
.support-msg.admin .support-msg-bubble:before{content:"";position:absolute;top:9px;left:-6px;border-width:5px 7px 5px 0;border-style:solid;border-color:transparent #fff transparent transparent}
.support-msg.user .support-msg-bubble{background:#95ec69;color:#173019}
.support-msg.user .support-msg-bubble:after{content:"";position:absolute;top:9px;right:-6px;border-width:5px 0 5px 7px;border-style:solid;border-color:transparent transparent transparent #95ec69}
.support-msg.admin .support-msg-order{border-color:#d4dee8;background:#f5f8fb;color:#435b78}
.support-msg.user .support-msg-order{border-color:#66bd5c;background:#ffffff38;color:#285d2d}
/* Ended support conversations clear the visible transcript and leave a compact rating card. */
.support-ended-state { min-height: 0; display: grid; align-content: center; justify-items: center; gap: 9px; padding: 34px 20px; background: #f5f8fc; color: #334962; text-align: center; }
.support-ended-state.hidden { display: none; }
.support-ended-state > strong { font-size: 15px; }
.support-ended-state > span { color: #7f91a7; font-size: 11px; }
.support-rating { display: grid; justify-items: center; gap: 6px; margin-top: 8px; color: #627892; font-size: 11px; }
.support-rating-stars { display: flex; gap: 4px; }
.support-rating-stars button { width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%; background: #e1e9f3; color: #a6b8cc; font-size: 19px; line-height: 1; cursor: pointer; transition: .15s; }
.support-rating-stars button:hover, .support-rating-stars button.active { background: #fff1bd; color: #efae22; transform: translateY(-1px); }
.support-rating-stars button:disabled { cursor: default; opacity: .9; }
.support-rating-status { min-height: 16px; margin: 0; color: #6d829c; font-size: 10px; }
.support-chat-body.is-ended { grid-template-rows: minmax(0, 1fr); }
.support-ended-state { flex: 1 1 auto; min-height: 0; width: 100%; }
.support-composer { flex: 0 0 auto; }
.support-error { flex: 0 0 auto; }
.support-agent-info>span em { font-style: normal; }
.support-agent-info>span.offline em { color: #ffd4a0; }