/* ---- 换掉 Chatwoot 右下角气泡的默认聊天图标 ---- */
/* 气泡按钮渲染在本页面 DOM（不在跨域 iframe 内），所以能直接用 CSS 覆盖。
   只针对启动气泡 :not(.woot--close)，避免把打开后的关闭 X 也换掉。
   #woot-widget-bubble-icon 是默认聊天图标（仅启动气泡有这个 id），藏掉它，
   用背景图放上自己的图标。换成你自己的图：替换 assets/launcher.svg 即可。 */
.woot-widget-bubble:not(.woot--close) {
  background-image: url('im.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-origin: border-box !important;
  background-size: 130% !important;
}
#woot-widget-bubble-icon { display: none !important; }
/* 点击/聚焦时浏览器给 <button> 加的黑色焦点轮廓，去掉它（只去 outline，不动投影 box-shadow） */
.woot-widget-bubble:focus,
.woot-widget-bubble:focus-visible { outline: none !important; }

/* 把客服对话框拉高，让完整二维码和选项按钮尽量同屏。容器在本页面 DOM 里，能覆盖；
   iframe 全开时高度是 100%，跟着容器一起变高。只在桌面端生效——窄屏(<668px)Chatwoot
   会让 widget 全屏，不要覆盖它。嫌高/矮就调 height 那个数。 */
@media (min-width: 668px) {
  .woot-widget-holder {
    height: 90vh !important;
    max-height: 900px !important;
  }
}

/* 让客服按钮和对话框贴住屏幕右边（默认离右 20px → 0）。加 body 前缀提高优先级，
   压过 SDK 注入的定位。 */
body .woot-widget-bubble.woot-elements--right,
body .woot-widget-holder.woot-elements--right {
  right: 0 !important;
}

/* 把右下角客服按钮往上挪一点（默认离底部 20px，这里改到 64px）。数值越大越靠上。
   打开后的关闭 X 同位置，一起上移。 */
body .woot-widget-bubble.woot-elements--right,
body .woot-widget-bubble.woot-elements--left {
  bottom: 80px !important;
}

/* 会话加载即预置消息后，SDK 会冒出「未读预览」小气泡（容器受限，塞了菜单/二维码后样式不对）。
   把这个预览藏掉：只留启动气泡，点开/自动弹出时进完整对话框。
   注意：只在「未读预览」这个状态下隐藏容器；widget 打开时没有 has-unread-view，不受影响。
   app.js 里 inUnreadView() 靠 class 判断，display:none 不改 class，JS 逻辑照常。 */
body .woot-widget-holder.has-unread-view {
  display: none !important;
}