/* ========================================================================== TCL India 官网 · Omnichannel Live Chat Widget 自定义样式 来源：Tina - IN - modern.html（2026-08-19 抽离，可直接引用） 用法： 说明：本文件仅含聊天控件相关样式；整页布局（导航/页脚等）由官网自行提供。 定制：可在页面 中先定义 :root 变量覆盖默认值（见下方变量区）。 ========================================================================== */ /* --------------------------- 0. 聊天按钮外层 iframe 定位 ------------------- 将 widget 整体上移至距页面底部 100px（按钮与聊天窗口都相对页面底部 100px）。 */ #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window { bottom: 100px !important; } /* ------------------------- 可定制变量（按需覆盖） ------------------------- */ :root { --tcl-lcw-launcher-bg: #e6162d; /* 聊天入口圆形按钮背景（TCL 红） */ --tcl-lcw-launcher-size: 56px; /* 桌面端聊天入口尺寸 */ --tcl-lcw-launcher-size-mobile: 48px; /* 移动端聊天入口尺寸 */ --tcl-lcw-launcher-right: 20px; /* 聊天入口右侧距离 */ --tcl-lcw-launcher-bottom: 96px; /* 聊天入口底部距离（悬浮按钮上方） */ --tcl-lcw-iframe-bottom: 100px; /* 悬浮入口整体上移量（避免遮挡页脚） */ --tcl-lcw-iframe-bottom-mobile: 88px; /* 移动端悬浮入口上移量 */ --tcl-lcw-zindex: 999999; /* 聊天入口层级 */ } /* --------------------------- 1. 加载状态提示 ------------------------------- 聊天组件加载完成前不显示文字（JS 在 lcw:ready 时清空）。 */ .chat-status { position: fixed; bottom: 24px; right: 24px; font-size: 12px; color: #999; pointer-events: none; z-index: 99998; } /* --------------------------- 2. 返回顶部浮动按钮 --------------------------- 聊天图标下方；默认隐藏，滚动超过 300px 后由 JS 显示。 */ .back-to-top { position: fixed; right: var(--tcl-lcw-launcher-right, 20px); bottom: 24px; width: var(--tcl-lcw-launcher-size, 56px); height: var(--tcl-lcw-launcher-size, 56px); border-radius: 50%; background: #fff; color: #333; border: 1px solid #e6e6e6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999998; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { color: var(--tcl-lcw-launcher-bg, #e6162d); } /* --------------------------- 5. 移动端适配 -------------------------------- */ @media (max-width: 768px) { .back-to-top { width: var(--tcl-lcw-launcher-size-mobile, 48px); height: var(--tcl-lcw-launcher-size-mobile, 48px); right: 16px; bottom: 20px; } }