.zx-chat-wrap{
  direction: rtl;
  --zx-brand:#4b49ac;
  --zx-btn-bg: var(--zx-brand);
  --zx-btn-hover-bg:#3f3da0;
  --zx-btn-text:#fff;
  --zx-btn-hover-text:#fff;
  --zx-font-family: inherit;
  --zx-off-x: 18px;
  --zx-off-y: 18px;
  font-family: var(--zx-font-family) !important;
  font-size: 14px;
}

.zx-chat-wrap button,
.zx-chat-wrap input,
.zx-chat-wrap textarea,
.zx-chat-wrap select{
  font-family: var(--zx-font-family) !important;
}

.zx-chat-wrap .zx-ico{
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.zx-chat-fab{
  position: fixed;
  z-index: 99999;
  border: 0;
  border-radius: 999px;
  padding: 12px 14px;
  background: var(--zx-btn-bg) !important;
  color: var(--zx-btn-text) !important;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.zx-chat-fab:hover{
  background: var(--zx-btn-hover-bg) !important;
  color: var(--zx-btn-hover-text) !important;
}

.zx-chat-fab__txt{font-weight:700; font-size:14px}
.zx-chat-fab.is-hidden{ display:none; }

.zx-chat-wrap[data-pos="bl"] .zx-chat-fab,
.zx-chat-wrap[data-pos="bl"] .zx-chat-panel{ left: var(--zx-off-x); bottom: var(--zx-off-y); }
.zx-chat-wrap[data-pos="br"] .zx-chat-fab,
.zx-chat-wrap[data-pos="br"] .zx-chat-panel{ right: var(--zx-off-x); bottom: var(--zx-off-y); }
.zx-chat-wrap[data-pos="tl"] .zx-chat-fab,
.zx-chat-wrap[data-pos="tl"] .zx-chat-panel{ left: var(--zx-off-x); top: var(--zx-off-y); }
.zx-chat-wrap[data-pos="tr"] .zx-chat-fab,
.zx-chat-wrap[data-pos="tr"] .zx-chat-panel{ right: var(--zx-off-x); top: var(--zx-off-y); }

.zx-chat-panel{
  position: fixed;
  width: min(380px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 36px));
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  z-index: 99999;
  overflow: hidden;
  display: none;
  border: 1px solid rgba(0,0,0,.08);
}

.zx-chat-panel.is-open{ display: grid; grid-template-rows: auto 1fr auto; }

.zx-chat-head{
  background: var(--zx-brand);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.zx-chat-title{ font-size: 15px; font-weight: 800; }
.zx-chat-close{
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.zx-chat-body{
  padding: 12px;
  overflow: auto;
  background: #fafafa;
}

.zx-chat-foot{
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  background: #fff;
}

.zx-chat-input{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
}

.zx-chat-send{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--zx-btn-bg) !important;
  color: var(--zx-btn-text) !important;
  cursor: pointer;
  font-size: 14px;
  min-width: 72px;
}

.zx-chat-send:hover{
  background: var(--zx-btn-hover-bg) !important;
  color: var(--zx-btn-hover-text) !important;
}

.zx-chat-msg{ display:flex; margin: 8px 0; }
.zx-chat-msg.zx-me{ justify-content: flex-end; }
.zx-chat-msg.zx-bot{ justify-content: flex-start; }

.zx-chat-bubble{
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  word-break: break-word;
}

.zx-me .zx-chat-bubble{
  background: var(--zx-brand);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.zx-bot .zx-chat-bubble{
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
  border-bottom-left-radius: 6px;
}

.zx-chat-typing{ opacity: .8; display:inline-block; }
.zx-chat-meta{ margin-top: 8px; font-size: 12px; opacity: .75; }