:root{
  --wpchat-z: 999999;
  --wpchat-width: 360px;
  --wpchat-height: 520px;
  --wpchat-border: rgba(0,0,0,.08);
  --wpchat-shadow: 0 10px 28px rgba(0,0,0,.12);
  --wpchat-bg: #ffffff;
  --wpchat-muted-bg: #f8f9fa;
  --wpchat-radius: 14px;
}

/* Launcher */
.wpchat-launcher{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: var(--wpchat-z);
}


/* =========================================================
   WPChat theme colors (primary/launcher)
   - values are injected via wp_add_inline_style based on settings
   ========================================================= */
.wpchat-panel,
.wpchat-leadform,
#wpchatContactModal{
  /* primary accent */
  --wpchat-primary: var(--wpchat-primary, #0d6efd);
}
.wpchat-launcher{
  --wpchat-launcher: var(--wpchat-launcher, var(--wpchat-primary, #0d6efd));
}

/* Primary buttons inside WPChat */
.wpchat-panel .btn.btn-primary,
.wpchat-leadform .btn.btn-primary,
#wpchatContactModal .btn.btn-primary{
  background-color: var(--wpchat-primary, #0d6efd) !important;
  border-color: var(--wpchat-primary, #0d6efd) !important;
  border:0 none;
}
.wpchat-panel .btn.btn-primary:hover,
.wpchat-leadform .btn.btn-primary:hover,
#wpchatContactModal .btn.btn-primary:hover{
  filter: brightness(.95);
}

/* Launcher button */
.wpchat-launcher .btn.btn-primary{
  background-color: var(--wpchat-launcher, var(--wpchat-primary, #0d6efd)) !important;
  border-color: var(--wpchat-launcher, var(--wpchat-primary, #0d6efd)) !important;
}
.wpchat-launcher .btn.btn-primary:hover{ filter: brightness(.95); }

/* Panel */
.wpchat-panel{
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: var(--wpchat-z);
  width: min(var(--wpchat-width), calc(100vw - 36px));
  height: min(var(--wpchat-height), calc(100vh - 140px));
  display: none;
}
.wpchat-panel.is-open{ display: block; }

.wpchat-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wpchat-bg);
  border: 1px solid var(--wpchat-border);
  box-shadow: var(--wpchat-shadow);
  border-radius: 16px;
}

.wpchat-header{
  background: #fff;
  border-bottom: 1px solid var(--wpchat-border);
  padding: 10px 12px;
}

.wpchat-messages{
  flex: 1;
  overflow: auto;
  padding: 12px;
  background: var(--wpchat-muted-bg);
}

/* 动态消息容器（历史 + 轮询消息） */
.wpchat-thread{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-top: 4px;
}

.wpchat-composer{
  background: #fff;
  border-top: 1px solid var(--wpchat-border);
  padding: 10px;
}

.wpchat-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.wpchat-msg-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-bottom:10px;
  animation: wpchatPop .14s ease-out;
}
.wpchat-msg-row.is-agent{ justify-content:flex-start; }
.wpchat-msg-row.is-visitor{ justify-content:flex-end; }
.wpchat-msg-row.is-system{ justify-content:center; }

@keyframes wpchatPop{
  from{ transform: translateY(3px); opacity: .65; }
  to{ transform: translateY(0); opacity: 1; }
}

.wpchat-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  user-select:none;
  flex: 0 0 28px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
}
.wpchat-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wpchat-msg-bubble{
  position:relative;
  max-width: 82%;
  border-radius: 16px;
  padding: 10px 12px;
  line-height: 1.45;
  word-break: break-word;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.wpchat-msg-bubble.is-visitor{
  background: var(--wpchat-primary, #0d6efd);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.wpchat-msg-bubble.is-system{
  background:#fff;
  color:#6b7280;
  border-color: rgba(0,0,0,.06);
  font-size: 12px;
  padding: 6px 10px;
}

.wpchat-msg-text{
  font-size: 13px;
  white-space: normal;
}

/* Bubble tails (subtle, modern) */
.wpchat-msg-bubble.is-visitor:after{
  content:'';
  position:absolute;
  right:-6px;
  bottom:10px;
  width:12px;
  height:12px;
  background: var(--wpchat-primary, #0d6efd);
  border-radius: 2px 10px 10px 10px;
  transform: rotate(45deg);
  opacity: .95;
}
.wpchat-msg-bubble.is-agent:after{
  content:'';
  position:absolute;
  left:-6px;
  bottom:10px;
  width:12px;
  height:12px;
  background:#fff;
  border-left:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
  border-radius: 10px 2px 10px 10px;
}

/* Remove tail for system */
.wpchat-msg-bubble.is-system:after{ display:none; }

.wpchat-meta{
  font-size: 11px;
  opacity: .7;
  margin-top: 5px;
  white-space: nowrap;
}
.wpchat-msg-bubble.is-visitor .wpchat-meta{ opacity: .85; }

.wpchat-typing{
  font-size: 12px;
  opacity: .7;
  padding: 0 2px 8px;
}

.wpchat-textarea{
  resize: none;
  min-height: 42px;
  max-height: 120px;
}

/* LOGO click */
.wpchat-logo-btn{
  cursor: pointer;
  transition: transform .08s ease;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  object-fit: cover;
}
.wpchat-logo-btn:active{ transform: scale(.98); }

.wpchat-send-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.wpchat-contact-logo{
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  object-fit: cover;
}
.wpchat-contact-qr{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  object-fit: cover;
}

/* Mobile */
@media (max-width: 576px){
  .wpchat-panel{
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 76px;
    height: min(70vh, 560px);
  }
  .wpchat-launcher{
    right: 12px;
    bottom: 12px;
  }
}

/* =========================================================
   Bootstrap 4 compatibility helpers (WPChat)
   - The site may load Bootstrap v4.x (no gap-*, g-*, fw-*)
   - These utilities are scoped to WPChat widgets/modals only
   ========================================================= */

/* fw-semibold (Bootstrap 5) */
.wpchat-launcher .fw-semibold,
.wpchat-panel .fw-semibold,
.wpchat-leadform .fw-semibold,
#wpchatContactModal .fw-semibold{
  font-weight: 600;
}

/* lh-sm (Bootstrap 5) */
.wpchat-launcher .lh-sm,
.wpchat-panel .lh-sm,
.wpchat-leadform .lh-sm,
#wpchatContactModal .lh-sm{
  line-height: 1.25;
}

/* rounded-pill (Bootstrap 5) */
.wpchat-launcher .rounded-pill,
.wpchat-panel .rounded-pill,
.wpchat-leadform .rounded-pill,
#wpchatContactModal .rounded-pill{
  border-radius: 50rem;
}

/* gap-* (Bootstrap 5) fallback for Bootstrap 4 (no flex gap utilities) */
.wpchat-launcher .d-flex.gap-2 > * + *,
.wpchat-panel .d-flex.gap-2 > * + *,
.wpchat-leadform .d-flex.gap-2 > * + *,
#wpchatContactModal .d-flex.gap-2 > * + *{
  margin-left: .5rem;
}
.wpchat-launcher .d-flex.flex-column.gap-2 > * + *,
.wpchat-panel .d-flex.flex-column.gap-2 > * + *,
.wpchat-leadform .d-flex.flex-column.gap-2 > * + *,
#wpchatContactModal .d-flex.flex-column.gap-2 > * + *{
  margin-left: 0;
  margin-top: .5rem;
}

.wpchat-launcher .d-flex.gap-3 > * + *,
.wpchat-panel .d-flex.gap-3 > * + *,
.wpchat-leadform .d-flex.gap-3 > * + *,
#wpchatContactModal .d-flex.gap-3 > * + *{
  margin-left: 1rem;
}
.wpchat-launcher .d-flex.flex-column.gap-3 > * + *,
.wpchat-panel .d-flex.flex-column.gap-3 > * + *,
.wpchat-leadform .d-flex.flex-column.gap-3 > * + *,
#wpchatContactModal .d-flex.flex-column.gap-3 > * + *{
  margin-left: 0;
  margin-top: 1rem;
}

/* g-2 (Bootstrap 5 gutter utility) fallback for Bootstrap 4 */
.wpchat-leadform .row.g-2,
#wpchatContactModal .row.g-2{
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
.wpchat-leadform .row.g-2 > [class^="col"],
.wpchat-leadform .row.g-2 > [class*=" col"],
#wpchatContactModal .row.g-2 > [class^="col"],
#wpchatContactModal .row.g-2 > [class*=" col"]{
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  margin-bottom: .5rem;
}
.wpchat-leadform .row.g-2 > [class^="col"]:last-child,
.wpchat-leadform .row.g-2 > [class*=" col"]:last-child,
#wpchatContactModal .row.g-2 > [class^="col"]:last-child,
#wpchatContactModal .row.g-2 > [class*=" col"]:last-child{
  margin-bottom: 0;
}

/* Badge look in BS4 when using "badge bg-*" pattern */
.wpchat-launcher .badge{
  display: inline-block;
  padding: .35em .65em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
}
.wpchat-launcher .badge.rounded-pill{
  border-radius: 50rem;
}

/* 仅作用于聊天插件区域，避免被主题污染 */
.wpchat-scope .form-control{
  display:block;
  width:100%;
  height:calc(1.5em + .75rem + 2px); /* BS4 标准 */
  padding:.375rem .75rem;
  font-size:1rem;
  line-height:1.5;
  color:#495057;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  margin-bottom:0;
}

/* 聚焦态 */
.wpchat-scope .form-control:focus{
  color:#495057;
  background-color:#fff;
  border-color:#80bdff;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
}

/* ===== WPChat 发送区：BS4 下无缝拼接 input + button ===== */
#wpchatPanel .input-group{
  align-items: stretch; /* 确保等高 */
}

/* textarea / input：去掉右侧圆角 */
#wpchatPanel .input-group > .form-control.wpchat-textarea{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* 发送按钮：去掉左侧圆角 + 合并中间边框 */
#wpchatPanel .input-group > button[data-wpchat-action="send"]{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px; /* 关键：压掉中间双边框 */
  display: flex;
  align-items: center;
}

/* focus 时避免出现“裂缝”/层级错位 */
#wpchatPanel .input-group > .form-control.wpchat-textarea:focus{
  position: relative;
  z-index: 3;
}
#wpchatPanel .input-group > button[data-wpchat-action="send"]{
  position: relative;
  z-index: 2;
}

/* 可选：让按钮高度更贴合 textarea（少数主题会把 btn line-height 改怪） */
#wpchatPanel .input-group > button[data-wpchat-action="send"] .wpchat-send-icon{
  display:block;
}