.connect-fc{
  position: fixed;
  bottom: var(--fc-b, 120px);
  z-index: 99999;
  width: var(--fc-size, 56px);
  height: var(--fc-size, 56px);
  pointer-events: none;
}
.connect-fc[data-side="left"]{ left: var(--fc-x, 16px); }
.connect-fc[data-side="right"]{ right: var(--fc-x, 16px); }

/* Stack is absolutely positioned above toggle so toggle NEVER moves */
.connect-fc__stack{
  position: absolute;
  left: 0;
  bottom: calc(var(--fc-size, 56px) + var(--fc-gap, 12px));
  display:flex;
  flex-direction: column;
  gap: var(--fc-gap, 12px);
  pointer-events: auto;
  transform-origin: bottom center;
  transition: transform .22s ease, opacity .22s ease;
}

.connect-fc__btn, .connect-fc__toggle{
  width: var(--fc-size, 56px);
  height: var(--fc-size, 56px);
  border-radius: var(--fc-radius, 999px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  text-decoration:none;
  border: none;
  cursor: pointer;
  background: var(--fc-toggle-open, rgba(255,255,255,.85));
  overflow: hidden;

  transition: transform .32s ease, background .22s ease, box-shadow .22s ease;
  overflow:hidden;}

.connect-fc__btn{
  position: relative;
}
.connect-fc__btn::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.connect-fc__icon{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.connect-fc__icon img{
  width: var(--btn-icon-size, 100%);
  height: var(--btn-icon-size, 100%);
  object-fit: cover;
  display:block;
  margin:auto;
  transform:none;
  transform-origin:center;
  filter: drop-shadow(0 calc(var(--fc-icon-depth, 8) * 0.25px) calc(var(--fc-icon-depth, 8) * 0.55px) rgba(0,0,0, calc(var(--fc-icon-depth, 8) * 0.012)));
}


.connect-fc__toggle{
  position: relative;
  z-index: 3;
  pointer-events: auto;
  background: var(--fc-toggle-open, rgba(255,255,255,.85));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* v4.20: main toggle supports separate open / closed image, with SVG fallback */
.connect-fc__toggle-state{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:rgba(0,0,0,.62);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.connect-fc__toggle-state img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.connect-fc__toggle-icon--close{
  font-size:30px;
  line-height:1;
  font-weight:800;
}
.connect-fc__toggle-svg--chat{
  width:52%;
  height:52%;
  display:block;
}
.connect-fc__toggle-state--closed{
  opacity:0;
  transform:scale(.88);
}
.connect-fc__toggle-state--open{
  opacity:1;
  transform:scale(1);
}
.connect-fc.is-collapsed .connect-fc__toggle{
  background:var(--fc-toggle-closed, #6ccf93);
}
.connect-fc.is-collapsed .connect-fc__toggle-state--open{
  opacity:0;
  transform:scale(.88) rotate(-90deg);
}
.connect-fc.is-collapsed .connect-fc__toggle-state--closed{
  opacity:1;
  transform:scale(1);
  color:#fff;
}

/* collapsed state: hide stack, swap icon to chat bubble */
.connect-fc.is-collapsed .connect-fc__stack{
  transform: scale(.86);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 480px){
  .connect-fc{ bottom: calc(var(--fc-b, 120px) * .85); }
}


/* Cute contact bubble (shown only when collapsed) */
.connect-fc__bubble{
  visibility: hidden;
  z-index: 2;
  display:block;
  position:absolute;
  bottom: 50%;
  transform: translateY(50%) translateX(0) scale(.98);
  white-space:nowrap;
  padding: 10px 16px;
  border-radius: 16px;
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  font-size:14px;
  font-weight:700;
  color:#333;
  pointer-events:none;
  opacity:0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease;
}
.connect-fc[data-side="left"] .connect-fc__bubble{
  visibility: hidden;
  z-index: 2;
  display:block;
  left: calc(var(--fc-size,56px) + 14px);
}
.connect-fc[data-side="right"] .connect-fc__bubble{
  visibility: hidden;
  z-index: 2;
  display:block;
  right: calc(var(--fc-size,56px) + 14px);
}

/* rounded tail */
.connect-fc__bubble::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  background:#fff;
  border-left: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border-bottom-left-radius: 4px;
}
.connect-fc[data-side="left"] .connect-fc__bubble::after{
  left:-7px;
}
.connect-fc[data-side="right"] .connect-fc__bubble::after{
  right:-7px;
  transform: translateY(-50%) rotate(225deg);
}

.connect-fc.is-collapsed .connect-fc__bubble{
  visibility: hidden; opacity:1 !important; visibility:visible !important; }


.connect-fc__btn--ai{border:0;padding:0;color:#fff}.connect-fc-ai-default-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;letter-spacing:.5px}.connect-fc-ai-panel{position:absolute;bottom:calc(var(--fc-size,56px) + var(--fc-gap,12px));width:min(340px,calc(100vw - 32px));max-height:520px;background:#fff;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.28);overflow:hidden;pointer-events:auto;opacity:0;transform:translateY(10px) scale(.98);visibility:hidden;transition:.22s ease}.connect-fc[data-side="left"] .connect-fc-ai-panel{left:0}.connect-fc[data-side="right"] .connect-fc-ai-panel{right:0}.connect-fc-ai-panel.is-open{opacity:1;transform:translateY(0) scale(1);visibility:visible}.connect-fc-ai-panel__head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;background:#f8f8fb}.connect-fc-ai-panel__close{border:0;background:transparent;font-size:22px;cursor:pointer}.connect-fc-ai-panel__body{padding:14px;height:300px;overflow:auto;display:flex;flex-direction:column;gap:10px}.connect-fc-ai-msg{padding:10px 12px;border-radius:14px;line-height:1.55;font-size:14px;white-space:pre-wrap}.connect-fc-ai-msg--bot{background:#f2f3f6;color:#333;align-self:flex-start;border-bottom-left-radius:4px}.connect-fc-ai-msg--user{background:#222;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}.connect-fc-ai-panel__form{display:flex;gap:8px;padding:12px;border-top:1px solid #eee}.connect-fc-ai-panel__form input{flex:1;min-width:0;border:1px solid #ddd;border-radius:999px;padding:10px 12px}.connect-fc-ai-panel__form button{border:0;border-radius:999px;padding:10px 14px;background:#222;color:#fff;cursor:pointer}@media(max-width:480px){.connect-fc-ai-panel{width:calc(100vw - 24px)}}


.connect-fc__btn--ai .connect-fc__icon img{
  width: var(--btn-icon-size, 100%);
  height: var(--btn-icon-size, 100%);
  object-fit: cover;
  display:block;
}

.connect-fc.is-collapsed .connect-fc__toggle{ transform: rotate(360deg); }
.connect-fc:not(.is-collapsed) .connect-fc__toggle{ transform: rotate(0deg); }
.connect-fc__toggle:hover{ transform: scale(1.06); }
.connect-fc.is-collapsed .connect-fc__toggle:hover{ transform: rotate(360deg) scale(1.06); }


/* v4.19 fixes */
.connect-fc-ai-panel{
  z-index: 20;
}
.connect-fc.is-ai-open .connect-fc-ai-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
}
.connect-fc[data-side="right"] .connect-fc-ai-panel{
  right:0;
}
.connect-fc[data-side="left"] .connect-fc-ai-panel{
  left:0;
}
@media(max-width:480px){
  .connect-fc[data-side="right"] .connect-fc-ai-panel{
    right:0;
  }
  .connect-fc[data-side="left"] .connect-fc-ai-panel{
    left:0;
  }
}


/* v4.21 stability fixes */
.connect-fc-ai-panel{
  z-index: 30;
}
.connect-fc-ai-panel.is-open,
.connect-fc.is-ai-open .connect-fc-ai-panel{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
}
.connect-fc__toggle{
  user-select:none;
}


/* v4.22: main toggle open state must clearly show X */
.connect-fc:not(.is-collapsed) .connect-fc__toggle{
  background: var(--fc-toggle-open, rgba(255,255,255,.92)) !important;
}
.connect-fc:not(.is-collapsed) .connect-fc__toggle-state--closed{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.connect-fc:not(.is-collapsed) .connect-fc__toggle-state--open{
  opacity:1 !important;
  visibility:visible !important;
  display:flex !important;
  pointer-events:none !important;
}
.connect-fc:not(.is-collapsed) .connect-fc__toggle-icon--close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:rgba(0,0,0,.62) !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

/* If a custom open image exists but you want X, the default X remains readable by hiding the custom open image in expanded state. */
.connect-fc:not(.is-collapsed) .connect-fc__toggle-state--open > img{
  display:none !important;
}

/* v4.22: isolate AI chat panel from theme / logged-out CSS */
.connect-fc .connect-fc-ai-panel,
.connect-fc .connect-fc-ai-panel *{
  box-sizing:border-box !important;
}
.connect-fc .connect-fc-ai-panel{
  position:absolute !important;
  bottom:calc(var(--fc-size,56px) + var(--fc-gap,12px)) !important;
  width:min(340px, calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  height:auto !important;
  max-height:520px !important;
  display:flex !important;
  flex-direction:column !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  text-align:left !important;
  direction:ltr !important;
  white-space:normal !important;
  line-height:1.5 !important;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.connect-fc[data-side="right"] .connect-fc-ai-panel{
  right:0 !important;
  left:auto !important;
}
.connect-fc[data-side="left"] .connect-fc-ai-panel{
  left:0 !important;
  right:auto !important;
}
.connect-fc .connect-fc-ai-panel__head{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
}
.connect-fc .connect-fc-ai-panel__head strong{
  display:block !important;
  font-size:16px !important;
  line-height:1.4 !important;
  writing-mode:horizontal-tb !important;
  white-space:normal !important;
}
.connect-fc .connect-fc-ai-panel__close{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#333 !important;
  font-size:24px !important;
  line-height:1 !important;
  padding:0 !important;
}
.connect-fc .connect-fc-ai-panel__body{
  flex:1 1 auto !important;
  min-height:180px !important;
  max-height:320px !important;
  overflow:auto !important;
  display:flex !important;
  flex-direction:column !important;
}
.connect-fc .connect-fc-ai-msg{
  display:block !important;
  max-width:86% !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
.connect-fc .connect-fc-ai-panel__form{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  width:100% !important;
}
.connect-fc .connect-fc-ai-panel__form input{
  width:auto !important;
  min-width:0 !important;
}
.connect-fc .connect-fc-ai-panel__form button{
  width:auto !important;
  white-space:nowrap !important;
}

@media(max-width:480px){
  .connect-fc .connect-fc-ai-panel{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
  }
  .connect-fc[data-side="right"] .connect-fc-ai-panel{
    right:0 !important;
  }
}


/* v4.23: logged-out hard fix for AI panel raw display */
.connect-fc .connect-fc-ai-panel:not(.is-open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) scale(.98) !important;
}
.connect-fc .connect-fc-ai-panel.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
  display:flex !important;
  flex-direction:column !important;
}


/* v4.24 final front isolation fixes */
.connect-fc{
  isolation:isolate !important;
}
.connect-fc__toggle{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.connect-fc__toggle-state{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:5 !important;
  transition:opacity .22s ease, transform .22s ease !important;
}
.connect-fc__toggle-state--open{
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1) !important;
}
.connect-fc__toggle-state--closed{
  opacity:0 !important;
  visibility:hidden !important;
  transform:scale(.88) !important;
}
.connect-fc.is-collapsed .connect-fc__toggle-state--open{
  opacity:0 !important;
  visibility:hidden !important;
  transform:scale(.88) rotate(-90deg) !important;
}
.connect-fc.is-collapsed .connect-fc__toggle-state--closed{
  opacity:1 !important;
  visibility:visible !important;
  transform:scale(1) !important;
  color:#fff !important;
}
.connect-fc__toggle-icon--close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:rgba(0,0,0,.62) !important;
}
.connect-fc__toggle-svg--chat{
  width:52% !important;
  height:52% !important;
  display:block !important;
}
.connect-fc__toggle-state img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:inherit !important;
}

/* Force AI panel to be a real card and never leak as raw text */
.connect-fc .connect-fc-ai-panel,
.connect-fc .connect-fc-ai-panel *{
  box-sizing:border-box !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
.connect-fc .connect-fc-ai-panel:not(.is-open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) scale(.98) !important;
}
.connect-fc .connect-fc-ai-panel.is-open,
.connect-fc.is-ai-open .connect-fc-ai-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
  display:flex !important;
  flex-direction:column !important;
}
.connect-fc .connect-fc-ai-panel__head{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.connect-fc .connect-fc-ai-panel__body{
  display:flex !important;
  flex-direction:column !important;
}
.connect-fc .connect-fc-ai-panel__form{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
}
.connect-fc .connect-fc-ai-panel__form input{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
}
.connect-fc .connect-fc-ai-panel__form button{
  flex:0 0 auto !important;
}


/* v4.25 hard overrides */
.connect-fc__toggle{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:transform .32s ease, background .22s ease, box-shadow .22s ease !important;
}
.connect-fc__toggle-state{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:5 !important;
}
.connect-fc:not(.is-collapsed) .connect-fc__toggle-state--open{
  opacity:1 !important;
  visibility:visible !important;
}
.connect-fc:not(.is-collapsed) .connect-fc__toggle-state--closed{
  opacity:0 !important;
  visibility:hidden !important;
}
.connect-fc.is-collapsed .connect-fc__toggle-state--open{
  opacity:0 !important;
  visibility:hidden !important;
}
.connect-fc.is-collapsed .connect-fc__toggle-state--closed{
  opacity:1 !important;
  visibility:visible !important;
  color:#fff !important;
}
.connect-fc__toggle-icon--close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:rgba(0,0,0,.62) !important;
}
.connect-fc .connect-fc-ai-panel,
.connect-fc .connect-fc-ai-panel *{
  box-sizing:border-box !important;
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
.connect-fc .connect-fc-ai-panel:not(.is-open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) scale(.98) !important;
}
.connect-fc .connect-fc-ai-panel.is-open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) scale(1) !important;
  display:flex !important;
  flex-direction:column !important;
}