.cf-chatbot {
  --cf-chat-bg: rgba(15, 15, 20, .92);
  --cf-chat-panel: rgba(255, 255, 255, .06);
  --cf-chat-line: rgba(255, 255, 255, .14);
  --cf-chat-text: #fff7ed;
  --cf-chat-muted: rgba(255, 255, 255, .72);
  --cf-chat-accent: #d4a017;
  --cf-chat-red: #c1121f;
  color: var(--cf-chat-text);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 125;
}

.cf-chatbot * {
  box-sizing: border-box;
}

.cf-chatbot-toggle {
  align-items: center;
  background: linear-gradient(135deg, var(--cf-chat-red), var(--cf-chat-accent));
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .42);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-weight: 950;
  gap: 10px;
  min-height: 54px;
  padding: 10px 15px 10px 10px;
}

.cf-chatbot-toggle-mark {
  align-items: center;
  background: rgba(255, 255, 255, .18);
  border-radius: 16px;
  display: inline-flex;
  font-size: 18px;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.cf-chatbot-toggle small {
  color: rgba(255, 255, 255, .76);
  display: block;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.cf-chatbot-panel {
  background: var(--cf-chat-bg);
  backdrop-filter: blur(18px);
  border: 1px solid var(--cf-chat-line);
  border-radius: 24px;
  bottom: 70px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
  display: none;
  max-height: min(680px, calc(100vh - 130px));
  overflow: hidden;
  position: absolute;
  right: 0;
  width: min(390px, calc(100vw - 28px));
}

.cf-chatbot.is-open .cf-chatbot-panel {
  display: flex;
  flex-direction: column;
}

.cf-chatbot-head {
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(193, 18, 31, .28), rgba(212, 160, 23, .18));
  border-bottom: 1px solid var(--cf-chat-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 16px;
}

.cf-chatbot-head strong {
  display: block;
  font-family: Outfit, Manrope, system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: -.2px;
}

.cf-chatbot-head span {
  color: var(--cf-chat-muted);
  display: block;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  margin-top: 3px;
}

.cf-chatbot-close {
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--cf-chat-line);
  border-radius: 12px;
  color: var(--cf-chat-text);
  cursor: pointer;
  font-weight: 950;
  height: 36px;
  width: 36px;
}

.cf-chatbot-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  overflow-y: auto;
  padding: 14px;
}

.cf-chatbot-msg {
  border-radius: 18px;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.5;
  max-width: 88%;
  padding: 11px 12px;
  white-space: pre-wrap;
}

.cf-chatbot-msg.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .88);
}

.cf-chatbot-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(193, 18, 31, .94), rgba(212, 160, 23, .86));
  color: #fff;
}

.cf-chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}

.cf-chatbot-chip {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
}

.cf-chatbot-form {
  border-top: 1px solid var(--cf-chat-line);
  display: flex;
  gap: 8px;
  padding: 12px;
}

.cf-chatbot-input {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  color: var(--cf-chat-text);
  flex: 1 1 auto;
  font: inherit;
  font-size: 14px;
  min-height: 44px;
  outline: none;
  padding: 10px 12px;
}

.cf-chatbot-input::placeholder {
  color: rgba(255, 255, 255, .48);
}

.cf-chatbot-send {
  background: var(--cf-chat-accent);
  border: 0;
  border-radius: 16px;
  color: #16110a;
  cursor: pointer;
  font-weight: 950;
  min-width: 76px;
  padding: 0 13px;
}

.cf-chatbot-wa {
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 850;
  padding: 0 14px 12px;
}

.cf-chatbot-wa a {
  color: #ffd166;
  font-weight: 950;
}

body.cf-chatbot-open .stickybar,
body.cf-chatbot-open .wa {
  display: none !important;
}

@media (max-width: 820px) {
  .cf-chatbot {
    bottom: calc(124px + env(safe-area-inset-bottom, 0px));
    left: auto;
    right: 12px;
  }

  .cf-chatbot-toggle {
    border-radius: 999px;
    min-height: 56px;
    min-width: 56px;
    padding: 8px;
  }

  .cf-chatbot-toggle > span:last-child {
    display: none;
  }

  .cf-chatbot-toggle-mark {
    height: 40px;
    width: 40px;
  }

  .cf-chatbot.is-open {
    inset: 0;
    pointer-events: none;
  }

  .cf-chatbot.is-open .cf-chatbot-toggle {
    display: none;
  }

  .cf-chatbot-panel {
    bottom: calc(12px + var(--cf-chat-keyboard-offset, 0px) + env(safe-area-inset-bottom, 0px));
    left: 12px;
    max-height: none;
    pointer-events: auto;
    position: fixed;
    right: 12px;
    width: auto;
    height: calc(var(--cf-chat-vh, 100dvh) - 24px - env(safe-area-inset-bottom, 0px));
  }

  .cf-chatbot.is-keyboard .cf-chatbot-head {
    padding: 10px 12px;
  }

  .cf-chatbot.is-keyboard .cf-chatbot-head span,
  .cf-chatbot.is-keyboard .cf-chatbot-suggestions,
  .cf-chatbot.is-keyboard .cf-chatbot-wa {
    display: none;
  }

  .cf-chatbot.is-keyboard .cf-chatbot-messages {
    min-height: 0;
  }
}