@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
/* Bubble button */
.kx-floating-bubble-btn {
  position: fixed;
  background: var(--kx-bubble-btn-bg);
  color: var(--kx-bubble-btn-icon-color);
  width: var(--kx-bubble-btn-width);
  height: var(--kx-bubble-btn-height);
  border-radius: var(--kx-bubble-btn-radius);
  display: var(--kx-bubble-btn-display);
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 2147483646;
}

.kx-floating-bubble-btn svg {
  stroke-width: var(--kx-bubble-btn-boldness);
  width: var(--kx-bubble-btn-icon-size);
  height: var(--kx-bubble-btn-icon-size);
}

.kx-magnifier-icon {
  fill: none;
}

/* Sparkle twinkle on the magnifier+sparks bubble icon. The three
   <use> elements inside the lens each fade in and out on their own
   delay so the lens reads as twinkling sparkles rather than three
   sparkles pulsing in unison. Offsets are non-uniform (0 / 0.9 /
   1.6 inside a 2.4s cycle) so the rhythm feels organic instead of
   a metronome. Plain magnifier icon has no <use> children so the
   rule doesn't fire there. */
@keyframes kx-sparkle-twinkle {
  0%,
  100% {
    opacity: 0.5;
  }
  25% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.85;
  }
}
.kx-magnifier-icon use {
  /* linear timing combined with sine-shaped intermediate keyframes
     gives a smooth, continuously-changing twinkle. ease-in-out had
     visible dwells at both the peak (1) and the trough (0.5) — the
     "snap" Kobi saw was the fast transition between those two
     held states.
     animation-fill-mode: backwards pre-applies the 0% keyframe
     (opacity 0.5) during animation-delay, so sparkles 2 & 3 don't
     jump from default opacity 1 to 0.5 when their cycle kicks in. */
  animation: kx-sparkle-twinkle 3.2s linear infinite backwards;
}
.kx-magnifier-icon use:nth-of-type(1) {
  animation-delay: 0s;
}
.kx-magnifier-icon use:nth-of-type(2) {
  animation-delay: 1.2s;
}
.kx-magnifier-icon use:nth-of-type(3) {
  animation-delay: 2.1s;
}
@media (prefers-reduced-motion: reduce) {
  .kx-magnifier-icon use {
    animation: none;
    opacity: 1;
  }
}

.kx-floating-bubble-btn:hover {
  filter: brightness(1.2);
  transition: all 0.2s ease;

  svg {
    transform: scale(1.05);
  }
}

.kx-floating-bubble-btn:active {
  transform: scale(0.95);
}

.kx-floating-bubble-btn[data-kx-position="top-left"] {
  top: 24px;
  left: 24px;
}

.kx-floating-bubble-btn[data-kx-position="top-right"] {
  top: 24px;
  right: 24px;
}

.kx-floating-bubble-btn[data-kx-position="bottom-left"] {
  bottom: 24px;
  left: 24px;
}

.kx-floating-bubble-btn[data-kx-position="bottom-right"] {
  bottom: 24px;
  right: 24px;
}

.kx-chat-modal * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.kx-chat-modal {
  direction: ltr;
  font-family: Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  /* Backdrop dim — alpha comes from --kx-frame-dim-alpha (set by JS
     from kx_widget_frame_dim, 0-1). Falls back to 0.5 to preserve the
     pre-merchant-control behavior on shops that haven't loaded config
     yet. Applies in both full-screen and framed modes. */
  background-color: rgba(0, 0, 0, var(--kx-frame-dim-alpha, 0.5));
  /* Blur radius from --kx-frame-blur (kx_widget_frame_blur, px).
     Falls back to 4px to preserve the pre-merchant-control default. */
  backdrop-filter: blur(var(--kx-frame-blur, 4px));
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  z-index: 10000000000;
  color-scheme: light;
  animation: fadeIn 0.2s ease-out;
}

/* Framed widget mode — desktop and tablet only. Pads the modal so the
   .kx-chat-container shrinks inward, leaving the dimmed backdrop
   visible on each side. The merchant configures the inset per side
   plus a corner radius. Clicking the frame closes the widget — see
   the modal click handler in kimonix-ac-chat.js. On phones (< 768px)
   the framed class still gets added but these rules don't fire, so
   the widget stays full-screen where the screen real estate matters. */
@media (min-width: 768px) {
  .kx-chat-modal.kx-widget-framed {
    padding-top: var(--kx-frame-top, 40px);
    padding-right: var(--kx-frame-right, 40px);
    padding-bottom: var(--kx-frame-bottom, 40px);
    padding-left: var(--kx-frame-left, 40px);
  }
  .kx-chat-modal.kx-widget-framed .kx-chat-container {
    border-radius: var(--kx-frame-radius, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }
}

.kx-chat-modal[data-kx-site-direction="rtl"] {
  direction: rtl;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-ai-intent {
  padding: 6px 4px 6px 16px;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-open-chat-intent {
  padding: 6px 4px 6px 16px;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-ai-search-button {
  padding: 6px 6px 6px 18px;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-hide-search-results-btn {
  margin-left: auto;
  margin-right: auto;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-chat-search-input-wrapper {
  flex-direction: row-reverse;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-ai-send-button {
  transform: rotate(180deg);
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-message.kx-user:has(.kx-message-content.rtl) {
  justify-content: flex-end;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-page-btn {
  right: auto;
  left: 2px;
}

.kx-chat-modal.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.kx-chat-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 14px 20px;
  background: white;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kx-chat-search-input-form {
  flex: 1;
  min-width: 50px !important;
  background: white !important;
}

.kx-disable-search .kx-chat-search-input-form {
  visibility: hidden;
}

/* Hide-search-during-chat behavior, opt-in via the kx_hide_search_in_chat
   merchant setting. When the chat input is on screen and that setting
   is "true", hide the in-chat search bar + search-results overlay so
   the chat input is the only text field on screen.
   The merchant can still re-search mid-chat: the .kx-search-toggle-btn
   icon (visible in chat mode) flips a `.kx-search-expanded` class on
   the modal which un-hides the bar. The :not(.kx-search-expanded)
   guard below lets that override take effect.
   !important on the results rule is needed because show/hideSearchResults
   set inline `style.display`.
   Gated on [data-kx-hide-search-in-chat="true"] so shops that haven't
   opted in keep the previous "both bars visible" UX. */
/* Search-only mode (.kx-chat-disabled) opts OUT of the
   hide-search-in-chat behavior — the search bar must always be visible
   because search is the only surface. The :not(.kx-chat-disabled) guard
   is critical: :has(.kx-ai-input-container.is-visible) only checks DOM
   presence (the JS still toggles that class even when our chat-disabled
   CSS hides the parent), so without the guard the rules would still
   match and silently collapse the search bar in search-only mode. */
.kx-chat-modal[data-kx-hide-search-in-chat="true"]:not(.kx-chat-disabled):has(
    .kx-ai-input-container.is-visible
  ):not(.kx-search-expanded)
  .kx-chat-search-input-form {
  display: none;
}
.kx-chat-modal[data-kx-hide-search-in-chat="true"]:not(.kx-chat-disabled):has(
    .kx-ai-input-container.is-visible
  ):not(.kx-search-expanded)
  .kx-search-results {
  display: none !important;
}

/* Search toggle button — only visible when (a) the merchant opted into
   the hide-search-in-chat setting, (b) chat mode is active, and (c) the
   bar isn't currently expanded. */
.kx-search-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.kx-search-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}
.kx-search-toggle-btn:active {
  transform: scale(0.95);
}
.kx-search-toggle-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.kx-chat-modal[data-kx-hide-search-in-chat="true"]:not(.kx-chat-disabled):has(
    .kx-ai-input-container.is-visible
  ):not(.kx-search-expanded):not(.kx-disable-search)
  .kx-search-toggle-btn {
  display: flex;
  /* Pushes itself + the new-conv + close buttons to the right side of
     the header now that the flex:1 search form is hidden. */
  margin-left: auto;
}

.kx-chat-search-input-form * {
  background: white !important;
}

.kx-chat-search-input-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
  background: white !important;
  background-color: white !important;
  border: none;
  box-shadow: inset 0 -2px 0 0 #e1e5e9;
  margin-bottom: -2px;
  border-radius: 0;
  padding: 10px 4px;
  direction: ltr;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kx-chat-search-input-wrapper:focus-within {
  box-shadow: inset 0 -3px 0 0 var(--kx-ai-chat--main-color);
  transform: none;
}

.kx-chat-search-input-wrapper:hover {
  box-shadow: inset 0 -3px 0 0 var(--kx-ai-chat--main-color);
  transform: none;
}

/* search icon */
.kx-search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  background: white !important;
  background-color: white !important;
}

.kx-search-icon svg {
  fill: none;
}

.kx-chat-search-input-wrapper:focus-within .kx-search-icon {
  color: var(--kx-ai-chat--main-color);
}

.kx-chat-search-input-wrapper:hover .kx-search-icon {
  color: var(--kx-ai-chat--main-color);
}

/* input styling */
.kx-search-chat-input {
  flex: 1;
  min-width: 0;
  font-family: "INTER";
  border: none;
  font-size: 16px !important;
  padding: 0;
  outline: none;
  background: white !important;
  background-color: white !important;
  box-shadow: none !important;
  border: none !important;
  color: #222;
  font-weight: 400;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.kx-search-chat-input::placeholder {
  color: #999;
  font-weight: 400;
}

.kx-search-chat-input:focus-visible {
  border: none !important;
}

.kx-search-chat-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  width: 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 6L2 2M6 6L10 10M6 6L10 2M6 6L2 10' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.kx-search-chat-input::-webkit-search-cancel-button:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 6L2 2M6 6L10 10M6 6L10 2M6 6L2 10' stroke='%23777' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kx-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #000;
  stroke: #000;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

#chatCloseBtn {
  color: #666;
  stroke: #666;
}

#chatCloseBtn svg {
 fill: none;
}

.kx-icon {
  width: 24px;
  height: 24px;
}

.kx-header-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.kx-header-btn:active {
  transform: scale(0.95);
}

.kx-header-btn svg {
  width: 24px;
  height: 24px;
}

/* Container (renamed from chat-box to chat-container) */
.kx-chat-container {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
  max-height: 100%;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kx-greetings-list li {
  list-style-type: none;
  padding-left: 0;
}

/* Body layout */
.kx-chat-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(to bottom, #fafbfc 0%, #f8f9fa 100%);
}

.kx-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: white;
}

.kx-chat-main.backdrop-active {
  overflow: hidden;
}

.kx-chat-messages-wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.kx-chat-messages-wrapper::-webkit-scrollbar {
  width: 6px;
}

.kx-chat-messages-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.kx-chat-messages-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.kx-chat-messages-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.kx-new-conversation-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #666;
  stroke: #666;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.kx-new-conversation-btn:disabled {
  background: transparent !important;
  cursor: default;
  color: #b4b4b4;
  transform: scale(1) !important;
}

.kx-new-conversation-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.kx-new-conversation-btn:active {
  transform: scale(0.95);
}

.kx-new-conversation-btn svg {
  width: 24px;
  height: 24px;
}

.kx-chat-history-loader {
  display: none;
  position: absolute;
  width: max-content;
  font-family: "INTER";
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  background-color: var(--kx-ai-chat--main-color);
  color: var(--kx-chat-text-color);
  font-size: 14px;
  border-radius: 40px;
  z-index: 9999;
  white-space: nowrap;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.kx-logo-wrapper {
  min-height: 10px;
  padding-inline: 20px;
  padding-bottom: 5px;
  display: flex !important;
}

.kx-powered-by {
  display: flex !important;
  margin: 0 auto;
  color: #808080;
  direction: ltr !important;
  text-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  text-align: center !important;
  font-size: 10px;
  text-decoration: none !important;
}

.kx-powered-by img {
  opacity: 0.6 !important;
  width: auto !important;
  max-height: 14px;
}

.kx-powered-by span {
  opacity: 0.6 !important;
}

.kx-chat-messages {
  flex: 1;
  padding: 16px 20px 0 20px;
  margin: 0 auto;
  max-width: 1100px;
  /* position: relative; */
  scroll-behavior: smooth;
}

.kx-hidden-message-due-error {
  display: none;
}

.debug-mode-active {
  .kx-message.kx-user.secret-message {
    display: flex;
    justify-content: flex-end;
  }

  .kx-message.kx-user.secret-message .kx-message-content {
    border: 1px solid #ffd600 !important;
    background: #fffee2;
    color: black;
  }

  .kx-dev-secret-msg {
    display: inline;
  }

  .kx-hidden-message-due-error {
    display: inline;
  }
}

.kx-dev-secret-msg {
  display: none;
  color: red !important;
}

.kx-dev-modal-backdrop {
  background: rgba(0, 0, 0, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100%;
}

.kx-dev-modal-show {
  display: flex;
}

.kx-dev-modal {
  width: 380px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  padding: 0;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  max-width: calc(100% - 20px);
}

.kx-dev-modal-close {
  display: flex;
  justify-content: end;
  padding: 5px 16px;
  background: var(--kx-ai-chat--main-color);
  border-bottom: 1px solid #eee;
  flex-shrink: 0;

  span {
    color: white;
    font-size: 20px;
    border: none;
    background: none;
    cursor: pointer;
  }
}

.kx-dev-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex-grow: 1;
  max-height: 100%;
}

.kx-dev-modal-body input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.kx-dev-mode-fields {
  display: flex;
  flex-direction: column;

  label {
    font-size: 13px;
  }
}

.kx-toggle-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Toggle switch reused from earlier */
.kx-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}
.kx-switch input {
  opacity: 0;
}
.kx-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 22px;
  transition: 0.2s;
}
.kx-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  top: 2px;
  left: 2px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
input:checked + .kx-slider {
  background: #4caf50;
}
input:checked + .kx-slider:before {
  transform: translateX(22px);
}

.kx-dev-controls {
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  border-top: 1px solid #eee;
}

.kx-dev-save-btn,
.kx-dev-reset-btn {
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}

.kx-dev-save-btn {
  background: #4caf50;
  color: white;
}

.kx-dev-reset-btn {
  background: #f0f0f0;
}

.kx-message {
  scroll-margin-top: 5px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  animation: messageSlideIn 0.3s ease-out;
}

.kx-message img {
  max-width: 100%;
}

.kx-message:last-child {
  margin-bottom: 24px;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kx-message.kx-user {
  justify-content: flex-end;
}

.kx-message.kx-user.secret-message {
  display: none;

  .kx-message-content {
    position: relative;
  }
}

.kx-message.kx-user.secret-message .kx-message-content::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -7px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #ffd600;
}

.kx-message.kx-user.secret-message .kx-message-content::after {
  content: "!";
  position: absolute;
  top: -7px;
  left: 1.5px;
  width: 0;
  height: 0;
  transform: translate(-50%, 2px);
  font-size: 11px;
  font-weight: 900;
  color: black;
  pointer-events: none;
}

.kx-message.kx-assistant {
  justify-content: flex-start;
}

.kx-message.kx-assistant .kx-message-content {
  padding: 0;
  border: none !important;
  box-shadow: none !important;
  max-width: 100%;
  flex-grow: 1;
}

.kx-message-content {
  font-family: "INTER";
  max-width: 80%;
  padding: 6px 18px;
  border-radius: 18px;
  word-wrap: break-word;
  /* word-break: break-all; */
  background: white;
  color: #222;
  border: 1px solid rgba(225, 229, 233, 0.8);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  line-height: 1.5;
  font-size: 15px;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "INTER" !important;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  h3 {
    font-size: 18px;
    font-weight: 600;
  }

  p,
  li {
    line-height: 1.8;
  }
}

.kx-intent-messages {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* AI Intents (from chat responses) */
.kx-ai-intent,
.kx-open-chat-intent {
  padding: 6px 16px 6px 4px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  border: none;
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-align: left;
  text-decoration: none;
  line-height: 1.5;
  gap: 2px;
}

.kx-disable-search .kx-open-chat-intent {
  display: none !important;
}

/* Ensure anchor tag intents (URL type) maintain the same styling */
.kx-ai-intent[data-kx-intent-type="url"] {
  color: #222;
  text-decoration: none;
}

.kx-ai-intent[data-kx-intent-type="url"]:visited {
  color: #222;
}

.kx-ai-intent:hover,
.kx-open-chat-intent:hover {
  filter: brightness(0.9);
}

.kx-ai-intent:active,
.kx-open-chat-intent:active {
  opacity: 0.7;
}

.kx-ai-intent span {
  position: relative;
  white-space: normal;
}

/* Search Predictions (from Shopify search API) */
.kx-search-prediction {
  padding: 6px 10px;
  width: max-content;
  white-space: nowrap;
  border: none;
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 500;
  color: #222;
  text-align: left;
  text-decoration: none;
  line-height: 1.5;
}

.kx-search-prediction:hover {
  filter: brightness(0.9);
}

.kx-search-prediction:active {
  opacity: 0.7;
}

/* AI Search Button (fallback when no products found) */
.kx-ai-search-button {
  padding: 6px 18px 6px 6px;
  width: max-content;
  white-space: nowrap;
  border: none;
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  background: var(--kx-ai-chat--main-color);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 500;
  color: var(--kx-chat-text-color);
  text-align: left;
  text-decoration: none;
  line-height: 1.5;
  gap: 2px;
}

.kx-ai-search-button:hover {
  filter: brightness(0.9);
}

.kx-ai-search-button:active {
  opacity: 0.7;
}

.kx-ai-search-button strong {
  font-weight: 700;
}

.kx-no-image-icon {
  width: 80px !important;
  height: 80px !important;
}

.kx-ai-sparkle-icon {
  width: 40px;
  height: 40px;
}

.kx-ai-sparkle-small-icon {
  display: block;
  height: 16px;
  width: 22px;
  color: var(--kx-ai-chat--main-color);
}

.kx-ai-double-sparkle-icon {
  display: block;
  height: 16px;
  width: 22px;
  color: white;
}

.kx-suggest-products {
  padding: 20px 0;
  width: 100%;
  background: white;
}

.kx-suggest-products:not(:has(.kx-suggest-product-cards)) {
  padding: 0;
  border-top: none;

  .kx-hide-search-results-btn {
    display: none;
  }
}

.kx-hide-search-results-btn {
  position: sticky;
  bottom: 0px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  padding: 0;
  border: none;
  background: var(--kx-ai-chat--main-color);
  margin-top: auto;
  color: var(--kx-chat-text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.kx-hide-search-results-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  transition: transform 0.3s ease;
}

.kx-hide-search-results-btn:hover {
  filter: brightness(0.95);
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.kx-hide-search-results-btn:active {
  transform: translateX(-50%) translateY(0);
}

.kx-suggest-products[is-hidden="true"] .kx-hide-search-results-btn svg {
  transform: rotate(180deg);
}

.kx-suggest-product-cards,
.kx-suggest-other-cards,
.kx-products-list {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 10px;
}

.kx-products-list {
  margin: 14px 0;
}

.kx-search-results {
  background: white;
  display: none;
  z-index: 3;
  position: absolute;
  overflow: scroll;
  padding: 20px;
  flex-direction: column;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: top 0.3s ease;
}

.kx-search-suggestions {
  display: flex;
  gap: 10px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 1;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 4px 0;
}

.kx-search-suggestions:empty {
  padding: 0;
}

.kx-message-content table {
  margin: 10px 0;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;

  th,
  td {
    padding: 5px 12px;
    border: none;
  }

  thead {
    border-bottom: 2px solid #e1e5e9;
  }

  tr {
    border-collapse: collapse;
    border-bottom: 1px solid #e1e5e9;
  }

  tr:last-child {
    border: none;
  }

  tbody tr:nth-child(even) {
    background: #fcfcfc;
  }

  thead th:first-child,
  tbody td:first-child {
    text-align: left;
  }

  thead th:not(:first-child),
  tbody td:not(:first-child) {
    text-align: center;
  }
}

.kx-message-content p {
  margin-bottom: 0 !important;
}

.kx-message-content ul li {
  list-style-type: none;
  padding-left: 0px;
}

.kx-message-content ol {
  list-style-position: inside;
}

.kx-message.kx-user .kx-message-content {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--kx-ai-chat--main-color) 85%, white) 0%,
    var(--kx-ai-chat--main-color) 100%
  );
  color: var(--kx-chat-text-color);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* RTL */
.kx-message-content.rtl {
  direction: rtl;
  text-align: right;
}

.kx-message-content.rtl .kx-ai-intent,
.kx-message-content.rtl .kx-open-chat-intent {
  padding: 6px 4px 6px 16px;
}

.kx-message.kx-user:has(.kx-message-content.rtl) {
  justify-content: flex-start;
}

.kx-product-card.kx-product-card-in-search {
  min-width: 0px;
}

.kx-product-card-in-search:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 0, 0, 0.1);
}

.kx-typing-indicator {
  display: none;
  align-items: flex-start;
  padding: 0 16px 20px;
  flex-shrink: 0;
  animation: fadeIn 0.2s ease-out;
}

.kx-typing-indicator.active {
  display: flex;
}

.kx-typing-bubble {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  max-width: none !important;
}

.kx-typing-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  color: var(--kx-ai-chat--main-color, #6b7280) !important;
  line-height: 0 !important;
  animation: kxIconPulse 2s ease-in-out infinite !important;
}

.kx-typing-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: none;
}

svg.kx-default-typing-icon{
  fill: currentColor;
}

@keyframes kxIconPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.kx-typing-dots {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.kx-typing-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  border-radius: 50% !important;
  background: #9ca3af !important;
  animation: kxTypingBounce 1.4s ease-in-out infinite !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.kx-typing-dot:nth-child(2) {
  animation-delay: 0.2s !important;
}

.kx-typing-dot:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes kxTypingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  30% {
    transform: translateY(-5px);
    opacity: 0.7;
  }
}

.kx-chat-messages,
.kx-typing-indicator {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.kx-ai-chat-input-form {
  max-width: 480px !important;
  width: 480px !important;
  margin: 0 !important;
}

.kx-chat-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 2px solid var(--kx-ai-chat--main-color);
  border-radius: 26px;
  padding: 8px;
  direction: ltr;
  transition: all 0.25s ease;
}

/* highlight wrapper when input is focused */
.kx-chat-input-wrapper:focus-within {
  border-color: var(--kx-ai-chat--main-color);
  box-shadow: 0 0 0 3px rgba(255, 80, 120, 0.25);
}

/* input styling */
.kx-chat-input {
  flex: 1;
  font-family: "INTER";
  border: none;
  font-size: 16px !important;
  padding: 8px 10px;
  outline: none;
  background: transparent;
  box-shadow: none !important;
  border: none !important;
}

.kx-chat-input:focus-visible {
  border: none !important;
}

.kx-ai-input-container {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 0 20px 5px 20px;
  margin: 0;
  gap: 12px;
  max-width: 100vw;
}

.kx-bottom-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.kx-bottom-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  backdrop-filter: blur(1px);

  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.75) 20%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.kx-ai-input-container.is-visible {
  display: flex;
}

.kx-ai-chat-input-form {
  padding: 0;
}

.kx-ai-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  background: white;
  border: 0.2px solid var(--kx-ai-chat--main-color);
  /* Pill shape — applies to both the in-modal input and the floating
     prompt bar (which overrides the border color but keeps the radius). */
  border-radius: 9999px;
  /* Horizontal padding only. Vertical padding lives on the input
     (rule below) so the input's hit target fills the bar's full height
     and clicks anywhere on the bar focus the field. */
  padding: 0 10px;
  margin: 0;
  /* Same reason as .kx-external-input-container: width:100% + padding
     overflows narrow viewports without border-box. */
  box-sizing: border-box;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical padding moved onto the input so its hit target spans the bar's
   full height. `!important` overrides `.kx-ai-input { padding: 0 !important }`
   declared further down. Applies to both the in-modal bar and the floating
   bar; the floating-bar-specific override has been removed since this base
   rule now covers it. */
.kx-ai-input-wrapper .kx-ai-input {
  padding: 16px 0 !important;
}

/* Extra inline-start padding when the input is the first child of the
   wrapper — i.e. no leading icon/button to occupy the pill's left end-cap
   curve. Without this, text starts right at the curve and reads as
   crowded. The floating bar has the sparkle button as the first child,
   so this rule doesn't match there. `padding-inline-start` is RTL-aware
   so the padding flips to the right side in RTL layouts. */
.kx-ai-input-wrapper > .kx-ai-input:first-child {
  padding-inline-start: 16px !important;
}

.kx-ai-input-wrapper:focus-within {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 0 0 3px color-mix(in srgb, var(--kx-ai-chat--main-color) 20%, transparent);
  transform: translateY(-1px);
}

.kx-ai-input {
  flex: 1;
  font-family: "INTER" !important;
  border: none !important;
  font-size: 16px !important;
  padding: 0px !important;
  outline: none;
  /* Transparent — the wrapper provides the white pill background, and
     the input sits inside it. Earlier this was `background: white` which
     was fine when the bar was a rounded rectangle, but with the pill
     shape the input's rectangular white box exposes the wrapper's left
     end-cap curve as a visible "second pill" behind it. Transparent
     lets the wrapper's white show through uniformly. */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 50px;
}

.kx-ai-input:focus-visible {
  border: none !important;
}

.kx-ai-input::placeholder {
  color: #999;
}

.kx-ai-send-button {
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--kx-ai-chat--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: none;
  padding: 6px;
}

.kx-ai-send-button:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: scale(1.1);
  color: var(--kx-ai-chat--main-color);
}

.kx-ai-send-button:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.06);
}

.kx-ai-send-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.kx-ai-send-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.kx-external-input-container {
  position: fixed;
  z-index: 2147483647;
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  margin: 0;
  max-width: 480px;
  width: 100%;
  /* border-box so width:100% + horizontal padding doesn't overflow the
     viewport in narrow contexts (e.g. the 380px settings preview iframe). */
  box-sizing: border-box;
  transition: all 0.5s ease;
}


.kx-external-input-container:hover {
  transform: translateX(-50%) scale(1.03);
}

.kx-external-input-container:has(.kx-external-input-wrapper:focus-within) {
  max-width: 600px;
}

.kx-external-input-form {
  width: 100%;
}

.kx-ai-input-wrapper.kx-external-input-wrapper {
  /* Floating bar uses its own main-color var (set per-merchant on the
     external prompt-bar settings, independent of the in-chat main color).
     gap: 8px gives breathing room between the left sparkle button, the
     input, and the right send arrow. Pill shape + symmetric padding +
     input hit target are inherited from .kx-ai-input-wrapper above. */
  border: 0.2px solid var(--kx-external-input-color);
  gap: 8px;
}

.kx-ai-input-wrapper.kx-external-input-wrapper:focus-within {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 0 0 3px color-mix(in srgb, var(--kx-external-input-color) 20%, transparent);
  transform: translateY(0);
}

.kx-ai-send-button.kx-external-input-send-button {
  color: var(--kx-external-input-color);
  /* Smoothly fade in/out with input content. Empty input → hidden;
     first keystroke → reveals. See the :has() rule on the wrapper. */
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.kx-ai-send-button.kx-external-input-send-button svg{
  fill: none;
}

.kx-ai-send-button.kx-external-input-send-button:hover {
  color: var(--kx-external-input-color);
}

/* "Unavailable" look on the send arrow while the input is empty —
   faded but still tinted with the merchant's main color, not grey.
   `pointer-events: none` ensures clicks pass through (the form
   submit can't fire at all), so this isn't purely visual: the
   button is genuinely inert until the shopper types something.
   Applies regardless of focus state — an empty focused bar
   shouldn't pretend to have a working submit. Covers both the
   in-modal send button and the floating bar's send button. */
.kx-ai-input-wrapper:has(.kx-ai-input:placeholder-shown) .kx-ai-send-button {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sparkle mark on the left side of the floating prompt bar. Standalone
   icon — `color` flows through to the SVG's `fill="currentColor"` so
   the sparkles pick up the merchant's main color. A soft main-color
   halo sits behind the icon at all times so it reads as a button.
   The halo itself stays constant across states — interaction feedback
   is carried by the sparkles (scale up on hover, scale down on press)
   so the affordance reads without the bg flickering darker. Hover
   only kicks in on desktop pointers — touch taps would otherwise
   leave the hover state stuck on, which reads as broken. */
.kx-ai-modal-button {
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--kx-external-input-color) 14%, transparent);
  color: var(--kx-external-input-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease;
  flex-shrink: 0;
  padding: 6px;
}

.kx-ai-modal-button svg {
  transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .kx-ai-modal-button:hover svg {
    transform: scale(1.08);
  }
}

.kx-ai-modal-button:active {
  transform: scale(0.96);
}

.kx-external-input-wrapper:has(input[dir="rtl"]) {
  .kx-external-input-send-button {
    transform: rotate(180deg);
  }
}

@media (max-width: 800px) {
  .kx-external-input-container:has(.kx-external-input-wrapper:focus-within) {
    max-width: 100%;
  }
}

/* Tighter bar on phones — desktop has 16px top/bottom input padding
   for a comfortable ~52px pill; on mobile that reads as chunky and
   eats vertical space. Drop to 8px so the bar sits closer to the
   button height (32px), keeping the pill but slimmer. Applies to
   both the in-modal and floating bars. */
@media (max-width: 600px) {
  .kx-ai-input-wrapper .kx-ai-input {
    padding: 8px 0 !important;
  }
}

/* Mobile collision: when both the prompt bar and the floating button
   are active, decide which one shows. Driven by the
   `data-kx-mobile-when-both` attribute on <body>, set by JS from the
   merchant's `kx_mobile_when_both` setting. Default ("bar" or
   unspecified) matches the long-standing behavior of hiding the bubble. */
@media (max-width: 550px) {
  body:not([data-kx-mobile-when-both]) .kx-floating-bubble-btn.kx-with-external-input,
  body[data-kx-mobile-when-both="bar"] .kx-floating-bubble-btn.kx-with-external-input {
    display: none !important;
  }
  body[data-kx-mobile-when-both="button"] .kx-external-input-container {
    display: none !important;
  }
  /* "both" — no rules, both visible. */
}

.kx-error-message {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
  padding: 8px;
  border-radius: 8px;
  margin: 8px 0;
}

@media (min-width: 201px) {
  .kx-suggest-product-cards,
  .kx-suggest-other-cards,
  .kx-products-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 791px) {
  .kx-suggest-product-cards,
  .kx-suggest-other-cards,
  .kx-products-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .kx-suggest-product-cards,
  .kx-suggest-other-cards,
  .kx-products-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1400px) {
  .kx-suggest-product-cards,
  .kx-suggest-other-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1600px) {
  .kx-suggest-product-cards,
  .kx-suggest-other-cards {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Section dividers between products / collections / pages / articles in
   the typeahead. Subtle horizontal line — not a hard break, just a visual
   cue that the section changed. */
.kx-suggest-section-divider {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 36px 0 0;
  width: 100%;
}

/* Headline above non-product, non-query sections (collections / pages /
   articles). Products and queries get no header — products is obvious,
   queries are text chips above the cards. */
.kx-suggest-section__title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 24px;
  letter-spacing: 0.02em;
}

/* Non-product cards (collections, pages, articles) re-use the product
   card shell for layout. The anchor needs to behave like the product
   card block — no underline, inherit text color, no hover artifacts. */
.kx-suggest-other-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.kx-suggest-other-card:hover {
  text-decoration: none;
}

/* Pages typically don't carry an image. Render a neutral filled box so
   the card height matches its sibling cards in the same row instead of
   collapsing to title-only. */
.kx-suggest-other-card__no-image {
  background: #f1f1f3;
}

/* Search-results loader — generic indicator that a search is in flight.
   Reuses the magnifier SVG next to the search input: a class on its
   wrapper triggers a CSS rotation around the glass center (cx=11, cy=11
   in the 24×24 viewBox → 11/24 ≈ 45.83%), so the handle orbits the
   glass rather than the whole icon spinning. Independent of any template
   re-rank or boosts work that may or may not run. */
.kx-search-icon.is-loading svg {
  animation: kx-search-loader-spin 0.8s linear infinite;
  transform-origin: 45.83% 45.83%;
}

@keyframes kx-search-loader-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .message-content {
    max-width: 90%;
  }
}

@media (max-width: 520px) {
  .kx-chat-modal {
    padding: 0;

    .kx-chat-container {
      border-radius: 0px;
      animation: slideUpMobile 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUpMobile {
      from {
        opacity: 0;
        transform: translateY(100%);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .kx-chat-header {
    padding: 12px 16px;
  }

  .kx-message-content {
    font-size: 14px;
    max-width: 85%;
  }

  .kx-message-content p {
    font-size: 14px !important;
  }

  .kx-ai-intent,
  .kx-open-chat-intent {
    font-size: 14px;
  }

  .kx-chat-messages {
    padding: 16px 12px;
  }

  .kx-powered-by {
    padding-inline: 12px;
  }

  .kx-message.kx-assistant {
    .kx-message-content {
      max-width: 100%;
    }
  }

  .kx-chat-input {
    font-size: 16px;
    padding: 4px 8px;
  }

  .kx-send-button {
    min-width: 32px;
    min-height: 32px;
  }

  .kx-send-button svg {
    max-width: 20px;
    max-height: 20px;
  }

  .kx-ai-input-container {
    padding: 0 12px 5px 12px;
    gap: 8px;
  }

  .kx-ai-chat-input-form {
    max-width: 100% !important;
    width: 100% !important;
  }

  .kx-ai-input-wrapper {
    padding: 8px 14px;
    margin: 0;
  }

  .kx-new-conversation-btn {
    padding: 6px;
  }

  .kx-new-conversation-btn svg {
    width: 20px;
    height: 20px;
  }

  .kx-ai-send-button {
    min-width: 30px;
    min-height: 30px;
  }

  .kx-ai-send-button svg {
    width: 18px;
    height: 18px;
  }
}

.kx-collections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.kx-collection-card {
  display: block;
  background: #fff;
  border: 1px solid #eae8e8cc;
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.kx-collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.kx-collection-card__image-grid {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.kx-collection-card__image-grid--multiple {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 1 / 1;
  gap: 4px;
}

.kx-collection-card__image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kx-collection-card__image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kx-collection-card__image-grid--single {
  aspect-ratio: 1 / 1;
}

.kx-collection-card__details {
  padding-top: 12px;
}

.kx-collection-card__title {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
}

.kx-collection-card__description {
  font-size: 14px;
  color: #555;
  margin: 0 !important;
}

@media (min-width: 201px) {
  .kx-collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 791px) {
  .kx-collections-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .kx-collections-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 499px) {
  .kx-collection-card__title {
    font-size: 15px !important;
  }

  .kx-collection-card__description {
    font-size: 13px;
  }
}

.kx-product-card {
  display: block;
  background: #fff;
  border: 1px solid #eae8e8cc;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Hover: lift via shadow + border-color, but keep the card in place so
   it doesn't shift up under the cursor. */
.kx-product-card:hover {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.kx-product-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kx-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kx-product-placeholder {
  color: var(--kx-ai-chat--main-color);
}

.kx-product-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--kx-ai-chat--main-color);
}

.kx-product-card__container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.kx-product-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.kx-product-card__main-image {
  width: 100%;
  aspect-ratio: var(--kx-product-card-aspect-ratio, 3 / 4);
  overflow: hidden;
}

.kx-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kx-product-card__action-btn {
  position: absolute;
  cursor: pointer;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 4px;
  width: 32px;
  height: 32px;
  background: var(--kx-ai-chat--main-color);
  color: white;
}

.kx-product-card__action-btn.kx-open-prd svg {
  fill: none;
}

.kx-product-card__action-btn:hover {
  filter: brightness(0.9);
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-card__action-btn {
  right: auto;
  left: 5px;
}

.kx-product-card__details {
  display: flex;
  flex-direction: column;
  padding: 12px;
  padding-top: 6px;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.kx-product-card__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.kx-product-card__price {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.kx-product-card__price > * {
  white-space: nowrap;
}

.kx-product-card__compare-price {
  text-decoration: line-through;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .kx-product-card__title {
    font-size: 16px;
  }

  .kx-product-card__price {
    font-size: 15px;
  }

  .kx-product-card__compare-price {
    font-size: 15px;
  }
}

.kx-prd-card-skeleton-box {
  background-color: #e5e5e5;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.kx-prd-card-skeleton-box::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.4s infinite;
}

/* Sizes matching real content */
.kx-prd-card-skeleton--image {
  width: 100%;
  display: block !important;
  aspect-ratio: var(--kx-product-card-aspect-ratio, 3 / 4);
}

.kx-prd-card-skeleton--title {
  display: block !important;
  height: 20px;
  width: 100%;
}

.kx-prd-card-skeleton--price {
  display: block !important;
  height: 16px;
  width: 140px;
  max-width: 100%;
}

.kx-products-list .kx-product-card[kx-content-loaded] > .kx-prd-card-placeholder {
  opacity: 0;
  display: none;
}

.kx-products-list .kx-product-card:has(> .kx-prd-card-placeholder) > :not(.kx-prd-card-placeholder) {
  opacity: 0;
  display: none;
  transition:
    opacity 0.5s ease,
    display 0.5s ease allow-discrete;
  transition-delay: 0.1s;
}

.kx-products-list
  .kx-product-card:has(> .kx-prd-card-placeholder)[kx-content-loaded]
  > :not(.kx-prd-card-placeholder) {
  opacity: 1;
  display: flex;
}

/* detailed product card styles */
.kx-product-detailed-card {
  width: 100%;
  max-width: 900px;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eae8e8cc;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  margin: 10px 0;
  position: relative;
}

.kx-product-page-btn {
  color: #666;
  position: absolute;
  top: 5px;
  right: 2px;
  cursor: pointer;
}

.kx-product-page-btn:hover {
  color: #252525;
}

.kx-product-page-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
}

.kx-product-detailed-card__container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  box-sizing: border-box;
}

.kx-product-detailed-card__media {
  width: 100%;
  max-width: 400px;
  min-width: 0;
  margin: 0 auto;
}

.kx-product-detailed-card__images {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Detailed product card -- Main Image */
.kx-product-detailed-card__images-carousel-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--kx-product-card-aspect-ratio, 3 / 4);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.kx-product-detailed-card__images-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.kx-product-detailed-card__images-carousel:hover .kx-product-detailed-card__arrow {
  display: flex;
}

.kx-product-detailed-card__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.kx-product-detailed-card__arrow svg {
  max-height: 18px;
  max-width: 18px;
}

.kx-product-detailed-card__arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}

.kx-product-detailed-card__arrow-prev {
  left: 5px;
}

.kx-product-detailed-card__arrow-prev svg {
  transform: rotateY(180deg);
}

.kx-product-detailed-card__arrow-next {
  right: 5px;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-detailed-card__arrow-next {
  left: 5px;
  right: auto;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-detailed-card__arrow-next svg {
  transform: rotateY(180deg);
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-detailed-card__arrow-prev {
  right: 5px;
  left: auto;
}

.kx-chat-modal[data-kx-site-direction="rtl"] .kx-product-detailed-card__arrow-prev svg {
  transform: rotateY(0);
}

.kx-product-detailed-card__image-wrapper {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.kx-product-detailed-card__image-wrapper.current-image {
  opacity: 1;
  pointer-events: auto;
}

.kx-product-detailed-card__image {
  width: 100%;
  height: 100%;
}

.kx-product-detailed-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Detailed product card -- Thumbnails (Small images) */
.kx-product-detailed-card__thumbnails {
  width: 100%;
  max-width: calc(100vw - 40px - 26px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 1px;
  margin: 0 -1px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.kx-product-detailed-card__thumbnail {
  border: 1px solid #e0dfdf;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 4px;
  opacity: 0.8;
  overflow: hidden;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

@media (max-width: 300px) {
  .kx-product-detailed-card__thumbnail {
    width: 65px;
    height: 65px;
  }
}

.kx-product-detailed-card__thumbnail:hover {
  opacity: 1;
  transform: scale(1.02);
}

.kx-product-detailed-card__thumbnail.selected {
  opacity: 1;
  border: 1px solid #ccc;
}

.kx-product-detailed-card__thumbnails:has(.kx-product-detailed-card__thumbnail.selected:not(:first-of-type))
  .kx-product-detailed-card__thumbnail:first-of-type {
  opacity: 0.8;
  border: 1px solid #e0dfdf;
}

.kx-product-detailed-card__thumbnail:first-of-type {
  opacity: 1;
  border: 1px solid #ccc;
}

.kx-product-detailed-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 800px) {
  .kx-product-detailed-card__container {
    flex-direction: row;
  }
}

.kx-product-detailed-card__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.kx-product-detailed-card__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kx-product-detailed-card__description {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  opacity: 1;
}

.kx-product-detailed-card__description-text {
  font-weight: 400;
  color: #353434;
  font-size: 14px;
  display: block;
  display: -webkit-box;
  line-height: 1.5;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: max-height 0.3s ease;
  max-height: calc(7 * 1.5em); /*max number of rows * line-height */
}

.kx-product-detailed-card__description-text:hover {
  -webkit-line-clamp: unset;
  max-height: 700px; /* large enough for long text */
}

.kx-product-detailed-card__description-text p {
  margin: 0;
}

.kx-product-detailed-card__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.kx-product-detailed-card__price {
  display: flex;
  gap: 5px;
  font-weight: 500;
  font-size: 18px;
}
.kx-product-detailed-card__compare-price {
  text-decoration: line-through;
  opacity: 0.5;
}

/* VARIANT SELECTOR starts */

.kx-product-detailed-card__variants {
  margin: 0;
}

.kx-product-detailed-card__variants .kx-variant-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kx-product-detailed-card__variants .kx-option-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kx-product-detailed-card__variants .kx-option-label {
  font-size: 13px;
  font-weight: 600;
}

.kx-product-detailed-card__variants .kx-option-current {
  font-weight: 400;
  color: #6b7280;
}

/* Swatches */
.kx-product-detailed-card__variants .kx-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.kx-product-detailed-card__variants .kx-swatches input[type="radio"] {
  display: none;
}

.kx-product-detailed-card__variants .kx-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s;
}

.kx-product-detailed-card__variants .kx-swatch.selected {
  outline-color: #111;
}

.kx-product-detailed-card__variants .kx-swatch.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}

.kx-product-detailed-card__variants .kx-swatch.disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.8) 55%, transparent 55%);
}

/* Dropdown */
.kx-product-detailed-card__variants .kx-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23374151' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  border: 1.5px solid #f3f3f3;
  border-radius: 8px;
  color: black;
  background-color: #f3f3f3;
  cursor: pointer;
  min-width: 100px;
  max-width: 160px;
  line-height: 1.2;
}

.kx-product-detailed-card__variants .kx-select:focus {
  outline: none;
  border-color: #111;
}

.kx-product-detailed-card__variants .kx-select:hover {
  border-color: #111;
}

.kx-product-detailed-card__variants .kx-select:focus-visible {
  border-color: #f3f3f3;
  box-shadow: none;
}

/* Radio pills */
.kx-product-detailed-card__variants .kx-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.kx-product-detailed-card__variants .kx-radios input[type="radio"] {
  display: none;
}

.kx-product-detailed-card__variants .kx-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  border: 1.5px solid #f3f3f3;
  background: #f3f3f3;
  color: black;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.kx-product-detailed-card__variants .kx-option.selected {
  border-color: #000;
  background: #000;
  color: #fff;
}

.kx-product-detailed-card__variants .kx-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* VARIANT SELECTOR ends */

.kx-product-detailed-card__quantity-selector {
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 4px;
  gap: 2px;
  border-radius: 40px;
  color: black;
  background: #f3f3f3;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
}

.kx-product-detailed-card__quantity-selector-button {
  background: transparent;
  color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
}

.kx-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.kx-product-detailed-card__quantity-selector-button svg {
  width: 16px;
  height: 16px;
  fill: none;
}

.kx-product-detailed-card__quantity-selector-button:hover svg {
  transform: scale(1.2);
}

.kx-product-detailed-card__quantity-selector-button.kx-disabled:hover svg {
  transform: scale(1);
}

.kx-product-detailed-card__quantity-input-wrapper {
  position: relative;
  width: 44px;
  height: 30px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kx-product-detailed-card__quantity-selector-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 13px;
  text-align: center;
  appearance: textfield;
  margin: 0;
  border: none;
  outline: none;
  background-color: transparent;
  pointer-events: none;
}

.kx-product-detailed-card__quantity-display {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.kx-product-detailed-card__quantity-display-number {
  display: block;
  width: 100%;
  text-align: center;
}

.kx-product-card__action_buttons {
  display: flex;
  padding-top: 20px;
  margin-top: auto;
  gap: 10px;
}

@media (max-width: 320px) {
  .kx-product-card__action_buttons {
    flex-wrap: wrap;
  }
}

.kx-product-card__action_buttons button {
  border-radius: 30px;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  border: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.kx-product-card__action_buttons button:hover {
  filter: brightness(0.9);
}

.kx-product-detailed-card__buy-button {
  background-color: #f3f3f3;
  color: #000;
}

.kx-product-detailed-card__buy-button:disabled {
  opacity: 0.5;
}

.kx-product-detailed-card__buy-button[disabled]:hover {
  filter: brightness(1);
  opacity: 0.5;
  cursor: not-allowed;
}

.kx-product-detailed__add-button {
  background-color: var(--kx-ai-chat--main-color);
  color: var(--kx-chat-text-color);
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 500;
  width: 100%;
}

.kx-product-detailed__add-button:hover {
  filter: brightness(0.9);
}

.kx-product-detailed__add-button:disabled {
  opacity: 0.5;
}

.kx-product-detailed__add-button[disabled]:hover {
  cursor: not-allowed;
  opacity: 0.5;
  filter: brightness(1);
}

.kx-prd-dtld-crd-skeleton-box {
  box-sizing: border-box;
  display: block !important;
  position: relative;
  background-color: #dddbdd;
  border-radius: 3px;
  overflow: hidden;
}

.kx-prd-dtld-crd-skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 5s infinite;
  content: "";
}
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.kx-product-detailed-card--placeholder .kx-product-detailed-card__container {
  flex-grow: 1;
}

.kx-prd-dtld-crd-skeleton--image {
  width: 100%;
  aspect-ratio: var(--kx-product-card-aspect-ratio, 3 / 4);
}

.kx-prd-dtld-crd-skeleton--small-image {
  margin-top: 10px;
  width: 100px;
  height: 100px;
}

.kx-prd-dtld-crd-skeleton--title {
  height: 30px;
  width: 100%;
}

.kx-prd-dtld-crd-skeleton--price {
  height: 20px;
  width: 140px;
}

.kx-prd-dtld-crd-skeleton--desc {
  width: 100%;
  height: 150px;
}

.kx-prd-dtld-crd-skeleton--btn {
  width: 100%;
  height: 40px;
  border-radius: 8px;
}

.kx-product-detailed-card > .kx-product-detailed-card--placeholder {
  opacity: 1;
  display: flex;
}

.kx-product-detailed-card[kx-content-loaded] > .kx-product-detailed-card--placeholder {
  opacity: 0;
  display: none;
}

.kx-product-detailed-card:has(> .kx-product-detailed-card--placeholder) > :not(.kx-product-detailed-card--placeholder) {
  opacity: 0;
  display: none;
  transition:
    opacity 0.5s ease,
    display 0.5s ease allow-discrete;
  transition-delay: 0.1s;
}

.kx-product-detailed-card:has(> .kx-product-detailed-card--placeholder)[kx-content-loaded]
  > :not(.kx-product-detailed-card--placeholder) {
  opacity: 1;
  display: flex;
}

/* Don't display alternative images if only one */
/* .kx-product-detailed-card__thumbnails:has(.kx-product-detailed-card-variants-thumbnails-img:only-of-type) {
  display: none;
} */

/* Don't display arrows if no variants images */
.kx-product-detailed-card__media:has(.kx-product-detailed-card-variants-thumbnails-img:only-of-type) {
  .kx-product-detailed-card__arrow {
    display: none !important;
  }
}


/* to prevent shopify chat be higher than our chat */
#shopify-chat inbox-online-store-chat {
  z-index: 2147483646 !important;
}

/* to prevent tc-capture-ki be higher than our chat */
aside.tc-capture-kit#tc-capture-kit.svelte-h69uew.svelte-h69uew.svelte-h69uew {
  z-index: 2147483646 !important;
}

aside.tc-mobile-download-banner-container#tapcart-web-banner[id][class] {
   z-index: 2147483646 !important;
}

aside.tc-capture-kit#tc-capture-kit[aria-label][id][class] {
  z-index: 2147483646 !important;
}

@media (max-width: 549px) {
  .kx-product-detailed-card__arrow {
    display: flex;
  }
}

@media (max-width: 499px) {
  .kx-product-detailed-card__title {
    font-size: 18px;
  }

  .kx-product-detailed-card__price {
    font-size: 16px;
  }

  .kx-product-detailed-card__description-text {
    font-size: 13px;
  }

  .kx-product-card__action_buttons button {
    font-size: 14px;
  }


}

/* Customer Account sign-in prompt (Shopify Customer Account MCP). */
.kx-auth-required {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}
.kx-auth-required__text {
  font-size: 13px;
  color: #4b5563;
}
.kx-auth-required__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: var(--kx-primary-color, #1f2937);
  color: var(--kx-primary-color-text, #fff);
}
.kx-auth-required__btn:hover { opacity: 0.9; }

/* "View all results" link rendered after the typeahead product cards.
   Inline (scrolls with content) so it doesn't compete with the floating
   bubble button which is fixed-positioned. */
.kx-search-all-results {
  display: block;
  margin: 14px 0 80px; /* bottom margin clears bottom-positioned floating bubble */
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.kx-search-all-results:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------------
   Search-only mode (kx_chat_disabled).
   Backoffice toggle hides the conversational agent surface inside the
   widget. Search remains fully functional (header input, typeahead
   results, product cards). Hidden bits:
   - Search/chat mode toggle button (top-left) — no mode to toggle into.
   - "New conversation" icon — no conversations are happening.
   - Chat message history container — never populated, but defense.
   - Welcome message + intent chips — already short-circuited in JS;
     CSS is a safety net for any stray welcome the JS path missed.
   - Bottom chat input form + "Powered by Kimonix" logo lockup.
   --------------------------------------------------------------------- */
.kx-chat-disabled .kx-search-toggle-btn,
.kx-chat-disabled .kx-new-conversation-btn,
.kx-chat-disabled .kx-chat-messages,
.kx-chat-disabled .kx-chat-history-loader,
.kx-chat-disabled .kx-typing-indicator,
.kx-chat-disabled .kx-bottom-wrapper,
.kx-chat-disabled .kx-logo-wrapper,
.kx-chat-disabled .kx-ai-search-button {
  display: none !important;
}