/* ================================================
   FLUXFRONT — Chatbot Widget
   Toggle orb, chat panel, messages, form
   ================================================ */


/* -- Chat toggle orb -- */

#ff-chat-toggle.ff-chat-orb {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 64px; height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,14,0.25);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,255,255,0.06) inset;
  cursor: pointer;
  z-index: 9999;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
#ff-chat-toggle.ff-chat-orb:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 22px 56px rgba(0,0,0,0.55), 0 0 28px rgba(0,212,170,0.15), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
#ff-chat-toggle.ff-chat-orb:active { transform: translateY(0) scale(0.985); }

#ff-chat-toggle .ff-chat-orb-core {
  position: absolute; inset: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(59,130,246,0.18), transparent 55%),
    linear-gradient(135deg, var(--teal), rgba(59,130,246,0.6));
  box-shadow: 0 18px 34px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08) inset;
}

#ff-chat-toggle .ff-chat-orb-glow {
  position: absolute; inset: -18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(0,212,170,0.3), rgba(59,130,246,0.15), transparent 62%);
  filter: blur(14px);
  opacity: 0.5;
  pointer-events: none;
  animation: ffOrbBreath 4.8s ease-in-out infinite;
}

#ff-chat-toggle.ff-chat-orb::after {
  content: "";
  position: absolute; inset: -40% -80%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.1) 55%, transparent 65%);
  transform: translateX(-60%) rotate(10deg);
  opacity: 0;
  pointer-events: none;
  animation: ffOrbShimmerAuto 10.5s ease-in-out infinite;
}

@keyframes ffOrbBreath { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.02); } }
@keyframes ffOrbShimmerAuto { 0%, 72% { opacity: 0; transform: translateX(-70%) rotate(10deg); } 76% { opacity: 0.3; } 82% { opacity: 0.5; transform: translateX(10%) rotate(10deg); } 86% { opacity: 0; } 100% { opacity: 0; transform: translateX(70%) rotate(10deg); } }

.ff-chat-orb.ff-chat-orb--open { animation: ffOrbSpinOpen 700ms cubic-bezier(.2,.9,.2,1) both; }
@keyframes ffOrbSpinOpen { 0% { transform: scale(1) rotate(0); } 55% { transform: scale(1.06) rotate(240deg); } 100% { transform: scale(1) rotate(360deg); } }
.ff-chat-orb.ff-chat-orb--pulse { animation: ffOrbPulse 900ms ease-out both; }
@keyframes ffOrbPulse { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 70% { transform: scale(0.98); } 100% { transform: scale(1); } }
.ff-chat-orb.ff-chat-orb--shimmer::after { opacity: 1; animation: ffOrbShimmer 900ms ease-out both; }
@keyframes ffOrbShimmer { 0% { transform: translateX(-60%) rotate(12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(60%) rotate(12deg); opacity: 0; } }


/* -- Chat panel -- */

#ff-chat-panel {
  position: fixed;
  right: 18px;
  bottom: calc(86px + var(--ff-kb));
  width: 360px;
  max-width: calc(100vw - 36px);
  height: 480px;
  max-height: calc(100dvh - 120px - var(--ff-kb));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(circle at 15% 15%, rgba(0,212,170,0.08), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(59,130,246,0.06), transparent 60%),
    rgba(10,10,14,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@supports not (height: 100dvh) { #ff-chat-panel { max-height: calc(100vh - 120px - var(--ff-kb)); } }
.ff-chat-hidden { display: none !important; }

.ff-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ff-chat-title { font-weight: 700; color: rgba(255,255,255,0.9); font-size: 14px; }
.ff-chat-subtitle { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 2px; }
#ff-chat-close { border: none; background: transparent; color: rgba(255,255,255,0.7); font-size: 16px; cursor: pointer; opacity: 0.8; }
#ff-chat-close:hover { opacity: 1; }

.ff-chat-messages { padding: 12px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ff-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.ff-user { margin-left: auto; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.10); color: #fff; }
.ff-bot { margin-right: auto; background: rgba(0,212,170,0.10); border: 1px solid rgba(0,212,170,0.15); color: #fff; }

.ff-chat-form { display: flex; gap: 10px; padding: 12px; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.08); }
#ff-chat-input { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.92); outline: none; font-size: 16px !important; -webkit-text-size-adjust: 100%; }
#ff-chat-input::placeholder { color: rgba(255,255,255,0.4); }
#ff-chat-send { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(135deg, rgba(0,212,170,0.8), rgba(59,130,246,0.5)); color: rgba(255,255,255,0.92); cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
#ff-chat-send:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
#ff-chat-send:disabled { opacity: 0.6; cursor: not-allowed; }