/* LFI Support Chatbot – widget styles. Everything is scoped under #lfi-sc. */
#lfi-sc {
  --lfi-c: #2F6B3A;             /* brand green (overridden from settings) */
  --lfi-oil: #C8952C;           /* cold-pressed oil gold, used as one thin accent */
  --lfi-ink: #1E291F;
  --lfi-muted: #5E6B5F;
  --lfi-surface: #F2F5EE;
  --lfi-line: #DDE4D6;
  --lfi-bg: #FFFFFF;
  --lfi-err: #B3261E;
  --lfi-tint: color-mix(in srgb, var(--lfi-c) 10%, #fff);

  position: fixed;
  bottom: 20px;
  z-index: 999990;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lfi-ink);
  -webkit-font-smoothing: antialiased;
}
#lfi-sc.lfi-sc--right { right: 20px; }
#lfi-sc.lfi-sc--left  { left: 20px; }
#lfi-sc *, #lfi-sc *::before, #lfi-sc *::after { box-sizing: border-box; }
#lfi-sc [hidden] { display: none !important; }

/* Launcher */
#lfi-sc .lfi-sc-launcher {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  /* light-to-brand gradient with a soft inner highlight */
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--lfi-c) 70%, #8fd19e) 0%, var(--lfi-c) 55%, color-mix(in srgb, var(--lfi-c) 80%, #000) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--lfi-c) 45%, transparent),
    0 2px 6px rgba(20, 30, 20, .2),
    inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
#lfi-sc .lfi-sc-launcher:hover { transform: translateY(-2px) scale(1.06); }
#lfi-sc .lfi-sc-launcher:active { transform: scale(.96); }
#lfi-sc .lfi-sc-launcher svg { position: relative; z-index: 1; }
#lfi-sc.lfi-sc--right .lfi-sc-launcher { margin-left: auto; }

/* Pulse ring: a few soft waves when the page loads and when the pop-up appears */
#lfi-sc .lfi-sc-launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lfi-c) 55%, transparent);
  animation: lfi-sc-pulse 2.4s ease-out 1.2s 3;
}
#lfi-sc.is-teasing .lfi-sc-launcher::before { animation: lfi-sc-pulse 2.4s ease-out 0s infinite; }
#lfi-sc.is-open .lfi-sc-launcher::before { animation: none; }
@keyframes lfi-sc-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lfi-c) 55%, transparent); }
  70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--lfi-c) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Gold "unread" dot until the chat is opened */
#lfi-sc .lfi-sc-launcher::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lfi-oil);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transform: scale(0);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 2;
}
#lfi-sc.has-dot:not(.is-open) .lfi-sc-launcher::after { transform: scale(1); }

/* Icon wiggle when the pop-up appears */
#lfi-sc.is-teasing .lfi-sc-launcher svg { animation: lfi-sc-wiggle 1.2s ease .2s 2; }
@keyframes lfi-sc-wiggle {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(11deg); }
  45% { transform: rotate(-7deg); }
  60% { transform: rotate(4deg); }
}

/* "Need help?" pop-up */
#lfi-sc .lfi-sc-teaser {
  position: absolute;
  bottom: 74px;
  width: max-content;
  max-width: min(290px, calc(100vw - 40px));
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(20, 35, 20, .18), 0 2px 6px rgba(20, 35, 20, .08);
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
#lfi-sc.lfi-sc--right .lfi-sc-teaser { right: 2px; transform-origin: bottom right; }
#lfi-sc.lfi-sc--left  .lfi-sc-teaser { left: 2px; transform-origin: bottom left; }
#lfi-sc.is-teasing .lfi-sc-teaser { opacity: 1; transform: none; }
/* little tail pointing at the button */
#lfi-sc .lfi-sc-teaser::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
  box-shadow: 3px 3px 6px rgba(20, 35, 20, .06);
}
#lfi-sc.lfi-sc--right .lfi-sc-teaser::after { right: 23px; }
#lfi-sc.lfi-sc--left  .lfi-sc-teaser::after { left: 23px; }

#lfi-sc .lfi-sc-teaser-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 38px 14px 14px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--lfi-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#lfi-sc .lfi-sc-teaser-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lfi-tint);
  color: var(--lfi-c);
}
#lfi-sc .lfi-sc-teaser-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#lfi-sc .lfi-sc-teaser-title { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--lfi-ink); }
#lfi-sc .lfi-sc-teaser-text { font-size: 13px; line-height: 1.35; color: var(--lfi-muted); }
#lfi-sc .lfi-sc-teaser-close {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lfi-muted);
  cursor: pointer;
}
#lfi-sc .lfi-sc-teaser-close:hover { background: var(--lfi-surface); color: var(--lfi-ink); }

/* Panel */
#lfi-sc .lfi-sc-panel {
  position: absolute;
  bottom: 72px;
  width: 370px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  background: var(--lfi-bg);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 35, 20, .22), 0 2px 8px rgba(20, 35, 20, .08);
  transform-origin: bottom right;
  animation: lfi-sc-in .18s ease-out;
}
#lfi-sc.lfi-sc--right .lfi-sc-panel { right: 0; }
#lfi-sc.lfi-sc--left  .lfi-sc-panel { left: 0; transform-origin: bottom left; }

@keyframes lfi-sc-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

#lfi-sc .lfi-sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 10px 14px 18px;
  background: var(--lfi-c);
  color: #fff;
  border-bottom: 3px solid var(--lfi-oil);
}
#lfi-sc .lfi-sc-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
}
#lfi-sc .lfi-sc-head-actions { display: flex; gap: 2px; }
#lfi-sc .lfi-sc-iconbtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
#lfi-sc .lfi-sc-iconbtn:hover { background: rgba(255, 255, 255, .14); }

/* Conversation */
#lfi-sc .lfi-sc-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--lfi-bg);
  overscroll-behavior: contain;
}

#lfi-sc .lfi-sc-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
#lfi-sc .lfi-sc-msg--bot {
  align-self: flex-start;
  background: var(--lfi-surface);
  border-bottom-left-radius: 5px;
}
#lfi-sc .lfi-sc-msg--user {
  align-self: flex-end;
  background: var(--lfi-c);
  color: #fff;
  border-bottom-right-radius: 5px;
}
#lfi-sc .lfi-sc-tel {
  color: var(--lfi-c);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

#lfi-sc .lfi-sc-typing { display: flex; gap: 4px; padding: 13px 14px; }
#lfi-sc .lfi-sc-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lfi-muted);
  opacity: .35;
  animation: lfi-sc-dot 1s infinite;
}
#lfi-sc .lfi-sc-typing span:nth-child(2) { animation-delay: .15s; }
#lfi-sc .lfi-sc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lfi-sc-dot { 30% { opacity: 1; } }

/* Option chips */
#lfi-sc .lfi-sc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 6px;
}
#lfi-sc .lfi-sc-chip {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--lfi-c);
  background: var(--lfi-bg);
  color: var(--lfi-c);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .12s ease, color .12s ease;
}
#lfi-sc .lfi-sc-chip:hover:not([disabled]) { background: var(--lfi-tint); }
#lfi-sc .lfi-sc-chip--solid { background: var(--lfi-c); color: #fff; }
#lfi-sc .lfi-sc-chip--solid:hover:not([disabled]) { background: color-mix(in srgb, var(--lfi-c) 85%, #000); color: #fff; }
#lfi-sc .lfi-sc-chips.is-locked .lfi-sc-chip { opacity: .4; cursor: default; }
#lfi-sc .lfi-sc-chips.is-locked .lfi-sc-chip.is-chosen { opacity: .75; }
#lfi-sc .lfi-sc-chips--link .lfi-sc-chip { padding: 11px 18px; }

/* Composer */
#lfi-sc .lfi-sc-composer {
  border-top: 1px solid var(--lfi-line);
  padding: 8px 10px 10px;
  background: var(--lfi-bg);
  margin: 0;
}
#lfi-sc .lfi-sc-ts:not(:empty) { margin-bottom: 4px; }
#lfi-sc .lfi-sc-ts iframe { max-width: 100%; }
#lfi-sc .lfi-sc-error {
  color: var(--lfi-err);
  font-size: 13px;
  padding: 0 4px;
}
#lfi-sc .lfi-sc-error:not(:empty) { padding-bottom: 6px; }
#lfi-sc .lfi-sc-row { display: flex; align-items: flex-end; gap: 8px; }
#lfi-sc .lfi-sc-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  color: var(--lfi-ink);
  background: var(--lfi-surface);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
  box-shadow: none;
  outline: none;
  resize: none;
  height: auto;
}
#lfi-sc .lfi-sc-input:focus { border-color: var(--lfi-c); background: var(--lfi-bg); }
#lfi-sc .lfi-sc-input:disabled { opacity: .7; cursor: not-allowed; }
#lfi-sc .lfi-sc-textarea { min-height: 76px; max-height: 140px; }
#lfi-sc .lfi-sc-send {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--lfi-c);
  color: #fff;
  cursor: pointer;
}
#lfi-sc .lfi-sc-send:disabled { background: var(--lfi-line); color: var(--lfi-muted); cursor: default; }

#lfi-sc .lfi-sc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Focus */
#lfi-sc button:focus-visible,
#lfi-sc a:focus-visible {
  outline: 3px solid var(--lfi-oil);
  outline-offset: 2px;
}

/* Mobile: full-screen sheet */
@media (max-width: 480px) {
  #lfi-sc { bottom: 15vh; }
  #lfi-sc.lfi-sc--right { right: 16px; }
  #lfi-sc.lfi-sc--left  { left: 16px; }
  #lfi-sc .lfi-sc-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  #lfi-sc.is-open .lfi-sc-launcher { display: none; }
  #lfi-sc .lfi-sc-launcher { width: 56px; height: 56px; }
  #lfi-sc .lfi-sc-teaser { bottom: 70px; }
  #lfi-sc .lfi-sc-msg { max-width: 88%; }
}

/* Shop / Wishlist / Cart bar stays fixed until 1025px. Keep the launcher
   15% of the screen height above the bottom edge so it clears the cart. */
@media (max-width: 1024px) {
  #lfi-sc { bottom: 15vh; }
}

@media (prefers-reduced-motion: reduce) {
  #lfi-sc .lfi-sc-launcher::before,
  #lfi-sc.is-teasing .lfi-sc-launcher::before,
  #lfi-sc.is-teasing .lfi-sc-launcher svg { animation: none; }
  #lfi-sc .lfi-sc-teaser { transition: opacity .2s ease; transform: none; }
  #lfi-sc .lfi-sc-panel { animation: none; }
  #lfi-sc .lfi-sc-launcher { transition: none; }
  #lfi-sc .lfi-sc-typing span { animation: none; opacity: .6; }
}

/* [lfi_support_chat] call-to-action */
.lfi-sc-cta { --lfi-c: #2F6B3A; margin: 24px 0; text-align: center; }
.lfi-sc-cta-text { margin: 0 0 12px; }
.lfi-sc-cta-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--lfi-c);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lfi-c) 35%, transparent);
}
.lfi-sc-cta-btn:hover { filter: brightness(.94); }