:root {
  --su-ls-sky: #1da1f2;
  --su-ls-leaf: #2fbf71;
  --su-ls-orange: #ff8a1e;
  --su-ls-ink: #17303f;
  --su-ls-muted: #5d6e7b;
  --su-ls-line: #cfe6f7;
}

.su-chatbot {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--su-ls-line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(12, 136, 207, 0.08);
}

.su-chatbot.is-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.su-chatbot-toggle {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(92deg, var(--su-ls-sky), var(--su-ls-orange));
  box-shadow: 0 14px 28px rgba(12, 136, 207, 0.34);
}

.su-chatbot-panel[hidden] {
  display: none !important;
}

.su-chatbot.is-widget .su-chatbot-panel {
  margin-top: 10px;
  width: min(360px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--su-ls-line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 18px 36px rgba(8, 33, 54, 0.22);
}

.su-chatbot-head {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--su-ls-ink);
}

.su-chatbot-preform {
  border: 1px solid var(--su-ls-line);
  border-radius: 12px;
  background: #f8fcff;
  padding: 10px;
  margin-bottom: 12px;
}

.su-chatbot-preform h4 {
  margin: 0 0 4px;
  font-size: 18px;
}

.su-chatbot-preform p {
  margin: 0 0 10px;
  color: var(--su-ls-muted);
  font-size: 13px;
}

.su-chatbot-pre-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.su-chatbot-pre-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.su-chatbot-pre-stack label {
  display: block;
  font-weight: 700;
  color: var(--su-ls-ink);
}

.su-chatbot-pre-stack input,
.su-chatbot-form input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--su-ls-line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--su-ls-ink);
  background: #fff;
  box-sizing: border-box;
}

.su-chatbot-log {
  border: 1px solid var(--su-ls-line);
  border-radius: 12px;
  background: #fafdff;
  padding: 10px;
  min-height: 280px;
  max-height: 340px;
  overflow: auto;
}

.su-chatbot-msg {
  width: fit-content;
  max-width: 88%;
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.5;
}

.su-chatbot-msg.is-bot {
  background: rgba(49, 184, 255, 0.14);
  border: 1px solid rgba(12, 136, 207, 0.24);
}

.su-chatbot-msg.is-user {
  margin-left: auto;
  background: rgba(255, 138, 30, 0.14);
  border: 1px solid rgba(227, 102, 0, 0.26);
}

.su-chatbot-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-top: 12px;
}

.su-chatbot-form input[type=\"file\"] {
  padding: 8px;
}

.su-chatbot-form[hidden],
.su-chatbot-preform[hidden] {
  display: none !important;
}

.su-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(92deg, var(--su-ls-sky), var(--su-ls-leaf));
}

.su-btn.su-btn-wa {
  background: linear-gradient(92deg, #25d366, #128c7e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.su-wa-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Inline SVG for WhatsApp mark (monochrome). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M19.11 17.46c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.61.14-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-.27-.14-1.14-.42-2.17-1.34-.8-.71-1.34-1.58-1.5-1.85-.16-.27-.02-.42.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.61-1.46-.84-2-.22-.53-.45-.46-.61-.47h-.52c-.18 0-.48.07-.73.34-.25.27-.95.93-.95 2.26s.98 2.62 1.12 2.8c.14.18 1.92 2.93 4.65 4.11.65.28 1.15.45 1.54.58.65.21 1.24.18 1.71.11.52-.08 1.6-.65 1.83-1.28.23-.63.23-1.17.16-1.28-.07-.11-.25-.18-.52-.32zM16.04 2C8.3 2 2 8.3 2 16.05c0 2.74.82 5.41 2.36 7.68L3 30l6.41-1.68a14.02 14.02 0 0 0 6.63 1.69h.01c7.74 0 14.05-6.3 14.05-14.05C30.1 8.3 23.78 2 16.04 2zm0 25.62h-.01c-2.23 0-4.4-.6-6.28-1.75l-.45-.27-3.8 1 1.02-3.7-.29-.48a11.54 11.54 0 0 1-1.78-6.17C4.45 9.61 9.59 4.46 16.04 4.46c3.12 0 6.05 1.22 8.25 3.43a11.6 11.6 0 0 1 3.42 8.21c0 6.45-5.15 11.52-11.67 11.52z'/%3E%3C/svg%3E");
}

.su-lsp-lead-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--su-ls-line);
  border-radius: 14px;
  padding: 14px;
}

.su-lsp-lead-form input,
.su-lsp-lead-form textarea,
.su-lsp-lead-form select {
  width: 100%;
  border: 1px solid var(--su-ls-line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  box-sizing: border-box;
}

.su-lsp-lead-note {
  font-size: 13px;
  color: var(--su-ls-muted);
}

@media (max-width: 680px) {
  .su-chatbot-pre-stack,
  .su-chatbot-form {
    grid-template-columns: 1fr;
  }

  .su-chatbot-pre-actions {
    grid-template-columns: 1fr;
  }

  .su-chatbot.is-widget {
    right: 10px;
    bottom: 10px;
  }
}