#ds-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ds-chat-color, #7c3aed);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ds-chat-bubble svg { width: 26px; height: 26px; }

#ds-chat-window {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#ds-chat-window.open { display: flex; }

#ds-chat-header {
  background: var(--ds-chat-color, #7c3aed);
  color: #fff;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#ds-chat-header button { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; }

#ds-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f7fb;
}

.ds-chat-msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; line-height: 1.4; white-space: pre-wrap; }
.ds-chat-msg-bot { align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; color: #1f2430; }
.ds-chat-msg-user { align-self: flex-end; background: var(--ds-chat-color, #7c3aed); color: #fff; }
.ds-chat-msg-typing { align-self: flex-start; color: #9ca3af; font-style: italic; }

#ds-chat-form { display: flex; border-top: 1px solid #e5e7eb; }
#ds-chat-input {
  flex: 1;
  border: none;
  padding: 12px;
  font-size: 13px;
  outline: none;
}
#ds-chat-send {
  border: none;
  background: var(--ds-chat-color, #7c3aed);
  color: #fff;
  padding: 0 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 480px) {
  #ds-chat-bubble { right: 20px; bottom: 20px; width: 50px; height: 50px; }
  #ds-chat-window { right: 16px; bottom: 84px; }
}

/* Left-side position (set in Admin > Store Settings > Live Chat) */
#ds-chat-bubble.ds-pos-left { right: auto; left: 24px; }
#ds-chat-window.ds-pos-left { right: auto; left: 24px; }
@media (max-width: 480px) {
  #ds-chat-bubble.ds-pos-left { left: 20px; right: auto; }
  #ds-chat-window.ds-pos-left { left: 16px; right: auto; }
}

/* Avoid overlapping the WhatsApp button when both are shown on the same side */
.ds-wa:not(.ds-pos-left) ~ #ds-chat-bubble:not(.ds-pos-left) { bottom: 92px; }
.ds-wa:not(.ds-pos-left) ~ #ds-chat-window:not(.ds-pos-left) { bottom: 160px; }
.ds-wa.ds-pos-left ~ #ds-chat-bubble.ds-pos-left { bottom: 92px; }
.ds-wa.ds-pos-left ~ #ds-chat-window.ds-pos-left { bottom: 160px; }

html[data-theme="dark"] #ds-chat-window { background: #16181f; }
html[data-theme="dark"] #ds-chat-messages { background: #1c1e27; }
html[data-theme="dark"] .ds-chat-msg-bot { background: #22242f; border-color: #2c2f3d; color: #e5e7eb; }
html[data-theme="dark"] #ds-chat-input { background: #16181f; color: #e5e7eb; }