/* Chat widget overrides (ASCII only; safe against console encoding) */

.cs-panel[hidden] { display: none !important; }
.cs-launch[hidden] { display: none !important; }

.cs-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.cs-quick, .cs-form, .cs-foot { flex: none; }

.cs-msg { width: 100%; min-width: 0; }
.cs-bubble { max-width: 82%; overflow-wrap: anywhere; }
.cs-cards, .cs-card, .cs-card * { white-space: normal; }
.cs-card { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.cs-card-actions a { flex: 1 1 0; min-width: 96px; }

/* Desktop: anchor the panel to the viewport so it can never slide off the top */
@media (min-width: 901px) {
  .cs-panel {
    position: fixed;
    right: 22px;
    bottom: 96px;
    height: min(640px, calc(100vh - 140px));
    max-height: min(640px, calc(100vh - 140px));
    overflow: hidden;
    z-index: 95;
  }
}

/* Tablet / phone: full screen sheet, always fully usable */
@media (max-width: 900px) {
  .cs-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow: hidden;
    z-index: 95;
  }
  .cs-body { padding: 12px 12px 12px; }
}
body.cs-open { overflow: hidden; }

/* keep the chat launcher and back-to-top from overlapping */
.cs-root { right: 22px; bottom: 24px; }
.back-top { right: 22px; bottom: 92px !important; z-index: 89; }
body.cs-open .back-top { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 900px) {
  .cs-root { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .back-top { right: 14px; bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 手机端聊天记录可以正常上下滑；点外面收起（js 负责） */
.cs-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.cs-panel { overscroll-behavior: contain; }
@media (max-width: 900px) {
  .cs-body { padding-bottom: 6px; }
}

/* 桌面端：面板贴着客服气泡，滚动条明确可见 */
@media (min-width: 901px) {
  .cs-panel { bottom: 84px; }
}
.cs-quick { scrollbar-width: none; -ms-overflow-style: none; }
.cs-quick::-webkit-scrollbar { display: none; }
.cs-body { scrollbar-width: thin; scrollbar-color: #C3D2EA transparent; scrollbar-gutter: stable; }
.cs-body::-webkit-scrollbar { width: 8px; }
.cs-body::-webkit-scrollbar-track { background: transparent; }
.cs-body::-webkit-scrollbar-thumb { background: #C3D2EA; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.cs-body::-webkit-scrollbar-thumb:hover { background: #9FB6DA; background-clip: padding-box; }

/* 手机全屏时隐藏气泡，避免压在面板上 */
@media (max-width: 900px) {
  body.cs-open .cs-launch { display: none !important; }
}

/* 桌面端不锁页面滚动：聊天面板是浮层，页面还能正常上下滚；只有全屏的手机端才锁 */
@media (min-width: 901px) {
  body.cs-open { overflow: auto !important; }
}
/* 避免隐藏滚动条时整页横向位移 */
html { scrollbar-gutter: stable; }

/* 桌面端面板跟着消息量长高，短对话不再留一大片空白 */
@media (min-width: 901px) {
  .cs-panel {
    height: auto !important;
    min-height: 360px;
    max-height: min(640px, calc(100vh - 140px));
  }
  .cs-body { min-height: 120px; }
}