/* ============================================================
   CLW Live Chat 组件样式（foot.jsp #clwChatLayer 专用）
   命名空间 .clw-* / #clwChatLayer；设计体系同全站：Oswald 标题 / Poppins 正文 / #0b75be
   z 层级：launcher 99999999（同旧 #online_qq_layer）；面板/遮罩 100000001（盖住 mobile_nav 99999998）
   ============================================================ */
#clwChatLayer [hidden] { display: none !important; }

/* ---------- 启动器气泡 ---------- */
.clw-launcher {
    position: fixed; right: 22px; bottom: 24px; z-index: 99999999;
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    background: #0b75be; box-shadow: 0 6px 18px rgba(11, 117, 190, .38);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease;
}
.clw-launcher:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(11, 117, 190, .5); }
.clw-launcher .clw-bubble {
    width: 26px; height: 20px; background: #fff; border-radius: 6px 6px 2px 6px; position: relative;
}
.clw-launcher .clw-bubble::before, .clw-launcher .clw-bubble::after {
    content: ""; position: absolute; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: #0b75be;
}
.clw-launcher .clw-bubble::before { left: 6px; }
.clw-launcher .clw-bubble::after { left: 12px; box-shadow: 6px 0 0 #0b75be; }
/* 呼吸光晕 */
.clw-launcher::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(11, 117, 190, .45); animation: clwGlow 2.4s ease-out infinite; pointer-events: none;
}
@keyframes clwGlow { 0% { transform: scale(.9); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
/* 在线绿点 */
.clw-launcher .clw-pres {
    position: absolute; right: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%;
    background: #3ecf7a; border: 2.5px solid #fff;
}
.clw-badge {
    position: absolute; left: -2px; top: -2px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: #e74c3c; color: #fff; border: 2px solid #fff;
    font-size: 11px; line-height: 14px; font-family: 'Oswald', Arial, sans-serif;
}

/* ---------- 遮罩 ---------- */
.clw-scrim { position: fixed; inset: 0; background: rgba(10, 20, 35, .45); z-index: 100000001; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.clw-scrim.on { opacity: 1; pointer-events: auto; }

/* ---------- 面板 ---------- */
.clw-panel {
    position: fixed; right: 22px; bottom: 96px; z-index: 100000001;
    width: 372px; height: 560px; height: min(560px, calc(100vh - 140px));
    background: #fff; border-radius: 12px; border-top: 3px solid #0b75be;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
    transition: opacity .25s cubic-bezier(.2, .8, .3, 1), transform .25s cubic-bezier(.2, .8, .3, 1);
    font-family: 'Poppins', 'Microsoft YaHei', Arial, sans-serif;
}
.clw-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.clw-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #0b75be, #0a4f86); color: #fff; padding: 12px 14px;
}
.clw-head .clw-ava {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .18);
    display: flex; align-items: center; justify-content: center;
    font: 600 13px/1 'Oswald', Arial, sans-serif; letter-spacing: .5px; position: relative;
}
.clw-head .clw-ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #3ecf7a; border: 2px solid #0b75be; }
.clw-head-t { flex: 1 1 auto; min-width: 0; }
.clw-head-t b { display: block; font: 600 14.5px/1.3 'Oswald', Arial, sans-serif; letter-spacing: .3px; }
.clw-head-t i { display: block; font-style: normal; font-size: 11px; opacity: .8; margin-top: 2px; }
.clw-clear, .clw-x {
    flex: 0 0 auto; background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, .85); font-family: 'Poppins', Arial, sans-serif;
}
.clw-clear { font-size: 11.5px; text-decoration: underline; padding: 4px 6px; }
.clw-x { font-size: 24px; line-height: 1; width: 30px; height: 30px; }
.clw-clear:hover, .clw-x:hover { color: #fff; }
.clw-clear:focus-visible, .clw-x:focus-visible, .clw-send:focus-visible, .clw-chip:focus-visible, .clw-launcher:focus-visible, .clw-retry:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }

/* ---------- 消息流 ---------- */
.clw-log { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px 6px; background: #f7fafd; }
.clw-log::-webkit-scrollbar { width: 7px; }
.clw-log::-webkit-scrollbar-thumb { background: #b9c6d3; border-radius: 4px; }
.clw-msg { display: flex; margin-bottom: 12px; align-items: flex-end; }
.clw-msg .clw-ava {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-right: 8px;
    background: #0b75be; color: #fff; font: 600 10px/26px 'Oswald', Arial, sans-serif; text-align: center;
}
.clw-body {
    max-width: 78%; padding: 9px 12px; font-size: 13px; line-height: 1.55; position: relative;
    white-space: pre-wrap; word-break: break-word; border-radius: 12px 12px 12px 2px;
    background: #fff; color: #20242b; box-shadow: 0 1px 3px rgba(20, 40, 70, .08);
}
.clw-me { justify-content: flex-end; }
.clw-me .clw-body { background: #0b75be; color: #fff; border-radius: 12px 12px 2px 12px; box-shadow: 0 1px 3px rgba(11, 117, 190, .3); }
.clw-pending { opacity: .62; }
.clw-sent { display: inline-block; margin-left: 6px; opacity: .8; }
.clw-sent::before { content: "\2713"; font-size: 11px; }
.clw-sys { justify-content: center; }
.clw-sys .clw-body { background: transparent; box-shadow: none; color: #8a98a8; font-size: 11.5px; max-width: 100%; text-align: center; }
.clw-retry { display: block; margin-top: 5px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); color: #ffd8d2; font-size: 11px; line-height: 1.4; padding: 2px 8px; border-radius: 5px; cursor: pointer; }
.clw-wabtn {
    display: inline-block; margin-top: 8px; background: #25d366; color: #fff !important;
    font-size: 12px; font-weight: 600; text-decoration: none; padding: 5px 12px; border-radius: 999px;
}
.clw-wabtn:hover { background: #1eb857; }
.clw-typing { display: flex; gap: 4px; align-items: center; background: #fff; border-radius: 12px 12px 12px 2px; padding: 11px 13px; box-shadow: 0 1px 3px rgba(20, 40, 70, .08); }
.clw-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa5b1; animation: clwDot .9s infinite ease-in-out; }
.clw-typing i:nth-child(2) { animation-delay: .15s; }
.clw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes clwDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- 快捷问题 chips ---------- */
.clw-chips { flex: 0 0 auto; display: flex; gap: 7px; padding: 8px 12px 4px; overflow-x: auto; background: #f7fafd; }
.clw-chips::-webkit-scrollbar { height: 0; }
.clw-chip {
    flex: 0 0 auto; background: #fff; border: 1px solid #cfe0ef; color: #0b75be;
    font-size: 12px; line-height: 1; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: 'Poppins', Arial, sans-serif;
    transition: background .15s, color .15s;
}
.clw-chip:hover { background: #0b75be; border-color: #0b75be; color: #fff; }

/* ---------- 输入行 ---------- */
.clw-inputrow { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px 12px 12px; background: #f7fafd; }
.clw-inputrow input {
    flex: 1 1 auto; min-width: 0; border: 1px solid #d7dfe8; border-radius: 8px; padding: 9px 12px;
    font-size: 13px; font-family: 'Poppins', Arial, sans-serif; color: #20242b; background: #fff;
}
.clw-inputrow input:focus { border-color: #0b75be; outline: none; box-shadow: 0 0 0 3px rgba(11, 117, 190, .12); }
.clw-send {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: #0b75be; color: #fff; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.clw-send:hover { background: #1d8de0; }
.clw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---------- 平板/手机 ---------- */
@media (max-width: 992px) {
    .clw-launcher { width: 52px; height: 52px; right: 14px; bottom: 78px; } /* 避开 .mobile_nav（fixed bottom:0 约 64-70px 高） */
    .clw-launcher .clw-bubble { width: 22px; height: 17px; }
    .clw-panel {
        right: 0; left: 0; bottom: 0; width: 100%;
        height: 78vh; height: 78dvh; max-height: 78dvh;
        border-radius: 14px 14px 0 0; border-top: none;
        transform: translateY(100%); opacity: 1;
    }
    .clw-panel.open { transform: translateY(0); }
    .clw-inputrow input { font-size: 16px; } /* iOS 聚焦不缩放 */
    .clw-inputrow { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}