/*
 * Customer chatbox only.
 * Kept separate from the page stylesheet so chatbox rules cannot leak into
 * shop cards, account layouts, blog pages, or administrative screens.
 */
#chatbot-widget {
  --chatbox-width: 410px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1045;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  font-family: inherit;
  visibility: visible !important;
  opacity: 1 !important;
}

#chatbot-widget > * { pointer-events: auto; }
#chatbot-widget [hidden] { display: none !important; }

#chatbot-widget #chatbot-launcher,
#chatbot-widget #chatbot-teaser {
  border: 0;
  cursor: pointer;
}

#chatbot-widget #chatbot-launcher {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: .85rem 1rem;
  border-radius: 999px;
  background: #1f4335;
  color: #fff;
  box-shadow: 0 16px 32px rgba(22, 41, 33, .22);
  font-weight: 800;
}

#chatbot-widget #chatbot-launcher:hover,
#chatbot-widget #chatbot-launcher:focus-visible {
  background: #315c4a;
}

#chatbot-widget .chatbot-launcher__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

#chatbot-widget .chatbot-launcher__badge {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8be2c6;
}

#chatbot-widget .chatbot-launcher__badge--is-closed,
#chatbot-widget .chatbot-panel__status-dot--is-closed {
  background: #d88a3d;
}

#chatbot-widget .chatbot-panel {
  display: flex;
  flex-direction: column;
  width: min(var(--chatbox-width), calc(100vw - 48px));
  height: min(680px, calc(100dvh - 48px));
  margin-bottom: .75rem;
  overflow: hidden;
  border: 1px solid rgba(64, 106, 90, .16);
  border-radius: 24px;
  background: #f8fbf8;
  box-shadow: 0 28px 70px rgba(22, 41, 33, .24);
  position: relative;
}

#chatbot-widget .chatbot-panel__header,
#chatbot-widget .chatbot-panel__composer {
  background: #10251d;
  color: #eef6f2;
}

#chatbot-widget .chatbot-panel__header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 74px;
  visibility: visible;
  opacity: 1;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
  padding: .85rem 1rem;
  flex-shrink: 0;
}

#chatbot-widget .chatbot-panel__brand,
#chatbot-widget .chatbot-panel__actions,
#chatbot-widget .chatbot-panel__composer-actions,
#chatbot-widget .chatbot-panel__exit-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

#chatbot-widget .chatbot-panel__brand { min-width: 0; flex: 1 1 auto; }
#chatbot-widget .chatbot-panel__avatar { width: 42px; height: 42px; flex: 0 0 auto; }
#chatbot-widget .chatbot-panel__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#chatbot-widget .chatbot-panel__titles { min-width: 0; }
#chatbot-widget .chatbot-panel__titles { display: block; visibility: visible; opacity: 1; }
#chatbot-widget .chatbot-panel__titles p { margin: 0; }
#chatbot-widget .chatbot-panel__company { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatbot-widget .chatbot-panel__subtitle,
#chatbot-widget .chatbot-panel__status { color: #a8c1b5; font-size: .78rem; }
#chatbot-widget .chatbot-panel__status { display: flex; align-items: center; gap: .35rem; }
#chatbot-widget .chatbot-panel__status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8be2c6; }
#chatbot-widget .chatbot-panel__status-dot--is-closed { background: #d88a3d; }

#chatbot-widget .chatbot-panel__action,
#chatbot-widget .chatbot-panel__send,
#chatbot-widget .chatbot-panel__exit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(139, 226, 198, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #eef6f2;
  cursor: pointer;
}

#chatbot-widget .chatbot-panel__action { width: 38px; background: #285d49; }
#chatbot-widget .chatbot-panel__send { background: #3c8c72; }
#chatbot-widget .chatbot-panel__exit-button { background: #3c8c72; }
#chatbot-widget .chatbot-panel__exit-button--danger,
#chatbot-widget .chatbot-panel__action--danger { background: #a94442; border-color: rgba(255, 214, 214, .3); }
#chatbot-widget .chatbot-panel__action:hover,
#chatbot-widget .chatbot-panel__action:focus-visible,
#chatbot-widget .chatbot-panel__send:hover,
#chatbot-widget .chatbot-panel__send:focus-visible,
#chatbot-widget .chatbot-panel__exit-button:hover,
#chatbot-widget .chatbot-panel__exit-button:focus-visible { background: #57a98b; }
#chatbot-widget .chatbot-panel__action--danger:hover,
#chatbot-widget .chatbot-panel__action--danger:focus-visible,
#chatbot-widget .chatbot-panel__exit-button--danger:hover,
#chatbot-widget .chatbot-panel__exit-button--danger:focus-visible { background: #c95755; }

#chatbot-widget .chatbot-panel__exit-strip { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .55rem 1rem; background: #173226; }
#chatbot-widget .chatbot-panel__exit-button { padding: .45rem .75rem; font-size: .78rem; }
#chatbot-widget .chatbot-panel__messages { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 1rem; background: #eff5ef; }
#chatbot-widget .chatbot-teaser { position: absolute; right: 0; bottom: calc(100% + .75rem); max-width: min(280px, calc(100vw - 32px)); padding: 0; background: transparent; color: #21483a; text-align: left; }
#chatbot-widget .chatbot-teaser__bubble { display: block; padding: .8rem 1rem; border: 1px solid rgba(64, 106, 90, .14); border-radius: 18px; background: #fff; box-shadow: 0 12px 26px rgba(22, 41, 33, .12); }
#chatbot-widget .chatbot-teaser__tail { position: absolute; right: 24px; bottom: -7px; width: 14px; height: 14px; transform: rotate(45deg); border-right: 1px solid rgba(64, 106, 90, .14); border-bottom: 1px solid rgba(64, 106, 90, .14); background: #fff; }
#chatbot-widget .chatbot-message { max-width: 92%; margin-bottom: .7rem; padding: .75rem .85rem; border-radius: 16px; line-height: 1.5; word-break: break-word; }
#chatbot-widget .chatbot-message--assistant,
#chatbot-widget .chatbot-message--agent,
#chatbot-widget .chatbot-message--admin { background: #fff; color: #21483a; border: 1px solid rgba(64, 106, 90, .12); }
#chatbot-widget .chatbot-message--user { margin-left: auto; background: #21483a; color: #fff; }
#chatbot-widget .chatbot-message__meta { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; font-size: .7rem; opacity: .75; }
#chatbot-widget .chatbot-message__content { white-space: pre-wrap; }
#chatbot-widget .chatbot-message--products { max-width: 100%; background: transparent; border: 0; padding: 0; box-shadow: none; }
#chatbot-widget .chatbot-message--products .chatbot-message__meta { padding-inline: .15rem; }
#chatbot-widget .chatbot-date-separator { width: fit-content; margin: .25rem auto .75rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(64, 106, 90, .1); color: #557367; font-size: .72rem; }
#chatbot-widget .chatbot-panel__typing { display: flex; align-items: center; gap: .55rem; padding: 0 1rem .6rem; background: #eff5ef; color: #6d8478; font-size: .8rem; }
#chatbot-widget .chatbot-panel__typing-dots { display: inline-flex; gap: .25rem; }
#chatbot-widget .chatbot-panel__typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: #3c8c72; animation: chatbox-dot-pulse 1.3s infinite ease-in-out; }
#chatbot-widget .chatbot-panel__typing-dots span:nth-child(2) { animation-delay: .15s; }
#chatbot-widget .chatbot-panel__typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes chatbox-dot-pulse { 0%, 80%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-4px); opacity: 1; } }
#chatbot-widget .chatbot-panel__composer { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; }
#chatbot-widget .chatbot-panel__input { min-width: 0; flex: 1 1 auto; resize: vertical; border: 1px solid rgba(139, 226, 198, .18); border-radius: 14px; padding: .7rem .8rem; background: #0c1612; color: #eef6f2; }
#chatbot-widget .chatbot-panel__input:focus { outline: 2px solid #8be2c6; outline-offset: 1px; }
#chatbot-widget .chatbot-panel__send { padding: .55rem .8rem; }
#chatbot-widget .chatbot-panel__privacy-note { padding: 0 .85rem .7rem; background: #10251d; color: #8ea497; font-size: .72rem; }
#chatbot-widget .chatbot-panel__menu { position: absolute; inset: 4.7rem .75rem 4.5rem; z-index: 2; display: flex; flex-direction: column; gap: .7rem; overflow: hidden; padding: 1rem; border-radius: 18px; background: #fdfefe; box-shadow: 0 20px 45px rgba(22, 41, 33, .18); }
#chatbot-widget .chatbot-panel__menu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
#chatbot-widget .chatbot-panel__menu-head p { margin: 0; }
#chatbot-widget .chatbot-panel__menu-kicker { color: #5f7a72; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#chatbot-widget .chatbot-panel__menu-title { margin-top: .15rem !important; color: #173226; font-size: .95rem; font-weight: 800; }
#chatbot-widget .chatbot-panel__menu-hint { max-width: 14ch; color: #557367; font-size: .78rem; text-align: right; }
#chatbot-widget .chatbot-panel__menu-body { min-height: 0; overflow-y: auto; }
#chatbot-widget .chatbot-panel__quick-replies,
#chatbot-widget .chatbot-panel__contact,
#chatbot-widget .chatbot-panel__contact-grid,
#chatbot-widget .chatbot-panel__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
#chatbot-widget .chatbot-panel__contact { display: grid; gap: .55rem; }
#chatbot-widget .chatbot-contact__grid { display: grid; gap: .55rem; }
#chatbot-widget .chatbot-chip,
#chatbot-widget .chatbot-contact__button,
#chatbot-widget .chatbot-product-card__button { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(64, 106, 90, .14); border-radius: 999px; padding: .55rem .8rem; background: #f8fbf8; color: #21483a; text-decoration: none; cursor: pointer; }
#chatbot-widget .chatbot-panel__product-grid { display: grid; gap: .7rem; }
#chatbot-widget .chatbot-product-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .7rem; padding: .7rem; border: 1px solid rgba(64, 106, 90, .12); border-radius: 16px; background: #fff; }
#chatbot-widget .chatbot-product-card__media { width: 64px; height: 64px; overflow: hidden; border-radius: 12px; }
#chatbot-widget .chatbot-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
#chatbot-widget .chatbot-product-card__body { min-width: 0; }
#chatbot-widget .chatbot-product-card__title { margin: 0; color: #21483a; font-size: .95rem; font-weight: 800; line-height: 1.35; }
#chatbot-widget .chatbot-product-card__meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-top: .3rem; color: #557367; font-size: .8rem; }
#chatbot-widget .chatbot-product-card__description { margin: .3rem 0 0; color: #546d65; font-size: .82rem; line-height: 1.45; }
#chatbot-widget .chatbot-product-card__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
#chatbot-widget .chatbot-contact__card { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem; border: 1px solid rgba(64, 106, 90, .1); border-radius: 14px; background: #fff; }
#chatbot-widget .chatbot-contact__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: rgba(60, 140, 114, .12); color: #21483a; }
#chatbot-widget .chatbot-contact__body { min-width: 0; flex: 1 1 auto; }
#chatbot-widget .chatbot-contact__title { display: block; color: #21483a; font-weight: 800; }
#chatbot-widget .chatbot-contact__description { display: block; margin-top: .15rem; color: #546d65; font-size: .82rem; line-height: 1.4; }
#chatbot-widget .chatbot-contact__button { margin-top: .45rem; }
#chatbot-widget .chatbot-emoji { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin: .2rem; border: 1px solid rgba(64, 106, 90, .14); border-radius: 12px; background: #fff; color: #21483a; cursor: pointer; font-size: 1.45rem; line-height: 1; }
#chatbot-widget .chatbot-emoji-picker {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 45% !important;
  bottom: 0 !important;
  z-index: 2000 !important;
  box-sizing: border-box;
  display: none !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 54px;
  align-content: start;
  gap: 1rem;
  min-height: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: scroll !important;
  scrollbar-width: auto;
  scrollbar-color: #3c8c72 #e8f0eb;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  border: 1px solid rgba(139, 226, 198, .22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}

#chatbot-widget .chatbot-emoji-popup .chatbot-emoji-picker::-webkit-scrollbar { width: 14px; }
#chatbot-widget .chatbot-emoji-popup .chatbot-emoji-picker::-webkit-scrollbar-track { border-radius: 10px; background: #e8f0eb; }
#chatbot-widget .chatbot-emoji-popup .chatbot-emoji-picker::-webkit-scrollbar-thumb { border: 3px solid #e8f0eb; border-radius: 10px; background: #3c8c72; }

#chatbot-widget.is-emoji-popup-open .chatbot-emoji-picker {
  display: grid !important;
}

#chatbot-widget .chatbot-emoji-popup {
  position: fixed;
  inset: auto 24px 82px auto;
  box-sizing: border-box;
  width: min(410px, calc(100vw - 48px));
  height: min(300px, 42dvh);
  max-width: min(410px, calc(100vw - 48px));
  max-height: min(300px, 42dvh);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll !important;
  scrollbar-width: auto;
  scrollbar-color: #3c8c72 #e8f0eb;
  border: 1px solid rgba(139, 226, 198, .22);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
  z-index: 2000;
}

#chatbot-widget .chatbot-emoji-popup::backdrop { background: transparent; }
#chatbot-widget .chatbot-emoji-popup .chatbot-emoji-picker {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0;
  border-radius: 0;
  background: #fff;
}

#chatbot-widget .chatbot-emoji-popup::-webkit-scrollbar { width: 14px; }
#chatbot-widget .chatbot-emoji-popup::-webkit-scrollbar-track { border-radius: 10px; background: #e8f0eb; }
#chatbot-widget .chatbot-emoji-popup::-webkit-scrollbar-thumb { border: 3px solid #e8f0eb; border-radius: 10px; background: #3c8c72; }

@media (max-width: 576px) {
  #chatbot-widget { right: 8px; bottom: 8px; }
  #chatbot-widget .chatbot-panel { width: calc(100vw - 16px); height: calc(100dvh - 36px); }
  #chatbot-widget .chatbot-launcher__text { display: none; }
  #chatbot-widget .chatbot-panel__header { min-height: 68px; padding: .7rem .75rem; }
  #chatbot-widget .chatbot-panel__action { width: 34px; min-height: 34px; }
  #chatbot-widget .chatbot-panel__send span { display: none; }
  #chatbot-widget .chatbot-emoji-popup { inset: auto 8px 66px 8px; width: auto; max-width: none; height: min(270px, 38dvh); max-height: min(270px, 38dvh); }
  #chatbot-widget .chatbot-emoji-picker { left: 0 !important; right: auto !important; top: 38% !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #chatbot-widget *,
  #chatbot-widget *::before,
  #chatbot-widget *::after { animation: none !important; transition: none !important; }
}