/* ============================================
   FITO CHAT WIDGET
   Floating AI assistant for Fitcom Fitness
   Design system: orange #F6921E · dark #0E0E0E · cream #FFE9D4
   Stacks ABOVE the existing WhatsApp FAB (bottom-right), never overlaps it.
   Cloned from StyleForth's bella-chat.css and re-skinned.
   ============================================ */

:root {
  --fito-orange: #F6921E;
  --fito-orange-dark: #D97B0A;
  --fito-dark: #0E0E0E;
  --fito-panel: #161616;
  --fito-cream: #FFE9D4;
  --fito-ink: #1A1A1A;
  /* WhatsApp FAB is 56px tall at bottom clamp(14,3vw,26) — lift Fito above it */
  --fito-stack-gap: 0px;
}

/* --- Launcher hidden until first scroll (toggled by .fito-revealed in fito-chat.js).
   No transform here: it would make the fixed-position .fito-bubble a containing block. --- */
#fito-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
#fito-widget.fito-revealed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Chat Bubble (Trigger) --- */
.fito-bubble {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + var(--fito-stack-gap));
  width: 62px;
  height: 62px;
  background: var(--fito-dark);
  border: 3px solid var(--fito-orange);
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(246, 146, 30, 0.42);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 81; /* just above wa-float (80) */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  overflow: hidden;
}

.fito-bubble:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px rgba(246, 146, 30, 0.55);
}

.fito-bubble__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* --- Chat Panel --- */
.fito-panel {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + var(--fito-stack-gap) + 72px);
  width: 384px;
  max-width: calc(100vw - 36px);
  height: 564px;
  max-height: calc(100vh - 160px);
  background: var(--fito-panel);
  border: 1px solid rgba(246, 146, 30, 0.22);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  z-index: 82;
  overflow: hidden;
}

.fito-panel.fito-panel--open { display: flex; }

/* --- Panel Header --- */
.fito-header {
  background: linear-gradient(135deg, #1c1c1c 0%, #0E0E0E 100%);
  border-bottom: 2px solid var(--fito-orange);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.fito-header__info { display: flex; align-items: center; gap: 11px; }

.fito-header__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--fito-orange);
  background: #0E0E0E;
}

.fito-header__name {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #fff;
}

.fito-header__label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--fito-orange);
  opacity: 0.95;
  margin: 0;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.fito-header__close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.fito-header__close:hover { background: rgba(246, 146, 30, 0.18); color: #fff; }

/* --- Messages Area --- */
.fito-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: var(--fito-dark);
}

.fito-messages::-webkit-scrollbar { width: 8px; }
.fito-messages::-webkit-scrollbar-thumb { background: rgba(246,146,30,0.35); border-radius: 8px; }

/* --- Message Bubble --- */
.fito-msg {
  display: flex;
  gap: 8px;
  max-width: 90%;
  animation: fitoFadeIn 0.25s ease;
}

.fito-msg--fito { align-self: flex-start; }
.fito-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.fito-msg__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  background: #0E0E0E;
}

div.fito-msg__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  background: var(--fito-orange);
  color: #0E0E0E;
  font-weight: 700;
}

.fito-msg__text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 14px;
  word-break: break-word;
}

.fito-msg--fito .fito-msg__text {
  background: #232323;
  color: #F3F0EC;
  border-bottom-left-radius: 4px;
}

.fito-msg--user .fito-msg__text {
  background: var(--fito-orange);
  color: #0E0E0E;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

/* Links inside Fito's messages */
.fito-msg--fito .fito-msg__text a {
  color: var(--fito-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fito-msg--fito .fito-msg__text a:hover { color: #ffb152; }

/* CTA / handoff buttons */
.fito-msg--fito .fito-msg__text a.fito-cta-btn {
  display: inline-block;
  background: var(--fito-orange);
  color: #0E0E0E;
  padding: 7px 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.fito-msg--fito .fito-msg__text a.fito-cta-btn:hover {
  background: var(--fito-orange-dark);
  color: #0E0E0E;
  transform: translateY(-1px);
}

/* --- Typing Indicator --- */
.fito-typing {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 90%;
  animation: fitoFadeIn 0.25s ease;
}

.fito-typing__dots {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background: #232323;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.fito-typing__dot {
  width: 7px;
  height: 7px;
  background: var(--fito-orange);
  border-radius: 50%;
  animation: fitoPulse 1.4s infinite;
}

.fito-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.fito-typing__dot:nth-child(3) { animation-delay: 0.4s; }

/* --- Input Area --- */
.fito-input {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  background: var(--fito-panel);
}

.fito-input__field {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  resize: none;
  min-height: 42px;
  max-height: 100px;
  line-height: 1.4;
  outline: none;
  background: #0E0E0E;
  color: #F3F0EC;
  transition: border-color 0.15s ease;
}

.fito-input__field:focus { border-color: var(--fito-orange); }
.fito-input__field::placeholder { color: #777; }

.fito-input__send {
  width: 42px;
  height: 42px;
  background: var(--fito-orange);
  border: none;
  border-radius: 50%;
  color: #0E0E0E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
  padding: 0;
}

.fito-input__send:hover { background: var(--fito-orange-dark); }
.fito-input__send:disabled { opacity: 0.4; cursor: not-allowed; }
.fito-input__send svg { width: 18px; height: 18px; }

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

@keyframes fitoPulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.1); }
}

/* --- Bubble attention nudge --- */
.fito-bubble--nudge { animation: fitoNudge 0.6s ease; }

.fito-bubble__hint {
  position: absolute;
  right: 72px;
  bottom: 50%;
  transform: translateY(50%);
  background: #fff;
  color: #1a1a1a;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fito-bubble__hint--visible { opacity: 1; }

.fito-bubble__hint::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #fff;
  border-right: none;
}

@keyframes fitoNudge {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.13); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
}

/* --- Mobile (full-screen panel) --- */
@media (max-width: 767px) {
  .fito-bubble {
    width: 56px;
    height: 56px;
    bottom: calc(clamp(14px, 3vw, 26px) + 70px);
  }

  .fito-panel {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: -webkit-fill-available;
    border-radius: 0;
    border: none;
  }

  .fito-input {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .fito-input__field { font-size: 16px; } /* prevent iOS auto-zoom */
}

/* Hide the Fito launcher while the mobile nav drawer is open so it never
   overlaps the drawer Book Now CTA corner (mobile pass 2026-06-11). */
body.drawer-open #fito-widget,
body:has(#mobileDrawer.is-open) #fito-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}