/* Fabaci Live Chat - frontend styles v4 */

#fabaci-live-chat-container { position: fixed; z-index: 99999; font-family: var(--fabaci-font-family, Arial, sans-serif); }

/* Positions */
#fabaci-live-chat-container.bottom-right { bottom: var(--fabaci-button-margin-bottom,25px); right: var(--fabaci-button-margin-right,25px); }
#fabaci-live-chat-container.bottom-left { bottom: var(--fabaci-button-margin-bottom,25px); left: var(--fabaci-button-margin-left,25px); }
#fabaci-live-chat-container.top-right { top: var(--fabaci-button-margin-top,25px); right: var(--fabaci-button-margin-right,25px); }
#fabaci-live-chat-container.top-left { top: var(--fabaci-button-margin-top,25px); left: var(--fabaci-button-margin-left,25px); }
#fabaci-live-chat-container.center { bottom: 30px; left: 50%; transform: translateX(-50%); }

/* Chat Button (balloon) */
#fabaci-chat-button {
  width: var(--fabaci-button-width,60px);
  height: var(--fabaci-button-height,60px);
  border-radius: 50%;
  background: var(--fabaci-button-color, #7857ED);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--fabaci-button-padding,8px);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
#fabaci-chat-button img { display:block; max-width:70%; max-height:70%; }
#fabaci-chat-button svg { display:block; width:28px; height:28px; }
#fabaci-chat-button:hover { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0,0,0,0.18); }

/* hint bubble */
#fabaci-chat-hint {
  position: absolute;
  bottom: calc(var(--fabaci-button-height,60px) + 16px);
  right: 0;
  width: var(--fabaci-hint-width,250px);
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: var(--fabaci-hint-shadow, 0 6px 18px rgba(0,0,0,0.12));
  display:flex;
  gap:8px;
  align-items:flex-start;
  animation: fabaci-fadein .45s ease;
  transform-origin: bottom right;
}

/* hint content and close */
#fabaci-chat-hint .hint-inner { flex:1; font-size:13px; color:var(--fabaci-text-color,#333); line-height:1.4; }
#fabaci-chat-hint .hint-close { cursor:pointer; font-weight:bold; color:var(--fabaci-button-color,#7857ED); padding-left:6px; font-size:18px; line-height:1; }

/* Chat box */
#fabaci-chat-box {
  position: absolute;
  bottom: calc(var(--fabaci-button-height,60px) + 18px);
  right: 0;
  width: 340px;
  max-height: 520px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: var(--fabaci-box-shadow, 0 10px 30px rgba(0,0,0,0.12));
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2,.9,.3,1), opacity .36s ease;
}

/* show class used by JS */
#fabaci-chat-box.show { transform: translateY(0); opacity:1; }

/* header */
.fabaci-chat-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background: var(--fabaci-header-bg,#7857ED);
  color: var(--fabaci-header-text,#fff);
}
.fabaci-header-title { font-weight:600; }
.fabaci-close { cursor:pointer; font-size:20px; color:inherit; }

/* body */
.fabaci-chat-body { padding:14px; font-size:var(--fabaci-font-size,14px); color:var(--fabaci-text-color,#333); height:320px; overflow:auto; background:transparent; }
.fabaci-welcome { margin-bottom:10px; }

/* footer (credit) */
.fabaci-chat-footer { padding:10px; background:#f6f6f6; text-align:center; font-size:12px; color:#666; }

/* Animations */
@keyframes fabaci-fadein {
  from { opacity:0; transform: translateY(8px); }
  to { opacity:1; transform: translateY(0); }
}

/* Hidden helper */
.hidden { display:none !important; }

/* Dark mode overrides */
#fabaci-live-chat-container.fabaci-dark #fabaci-chat-box {
  background: var(--fabaci-bg-dark, #121212);
  color: var(--fabaci-text-dark, #E8E8E8);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}

#fabaci-live-chat-container.fabaci-dark .fabaci-chat-header {
  background: var(--fabaci-header-bg, #2B2B2B);
  color: var(--fabaci-header-text, #fff);
}

#fabaci-live-chat-container.fabaci-dark .fabaci-chat-body {
  background: transparent;
  color: var(--fabaci-text-dark, #E8E8E8);
}

#fabaci-live-chat-container.fabaci-dark #fabaci-chat-hint {
  background: var(--fabaci-hint-bg-dark, #1E1E1E);
  color: var(--fabaci-text-dark, #E8E8E8);
  box-shadow: var(--fabaci-hint-shadow, 0 8px 20px rgba(0,0,0,0.5));
}

#fabaci-live-chat-container.fabaci-dark #fabaci-chat-button {
  filter: none;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
}