/* ===== Faire Orb Widget =====
   Scoped under #faire-root. Safe to include on any page. */

#faire-root, #faire-root *{
  box-sizing:border-box;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#faire-root{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:999999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

/* ---- The orb itself ---- */
.faire-orb{
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  position:relative;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 60% 70%, #f4c6ff 0%, #c79bff 35%, #8e7bff 65%, #6ee7c8 100%);
  box-shadow:
    0 0 16px 4px rgba(199, 155, 255, 0.55),
    0 0 36px 10px rgba(142, 123, 255, 0.35),
    inset 0 0 14px rgba(255,255,255,0.5);
  animation: faire-float 3.4s ease-in-out infinite, faire-pulse 2.6s ease-in-out infinite;
}

.faire-orb:hover{ animation-play-state:paused; transform:scale(1.08); transition:transform .2s ease; }

@keyframes faire-float{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes faire-pulse{
  0%,100%{ box-shadow:0 0 16px 4px rgba(199,155,255,.55), 0 0 36px 10px rgba(142,123,255,.35), inset 0 0 14px rgba(255,255,255,.5); }
  50%{ box-shadow:0 0 22px 6px rgba(199,155,255,.75), 0 0 48px 16px rgba(142,123,255,.5), inset 0 0 18px rgba(255,255,255,.65); }
}

.faire-orb__sparkle{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, #fff, transparent);
  opacity:.8;
  animation: faire-sparkle 2.2s linear infinite;
}
@keyframes faire-sparkle{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; }
}

.faire-orb__label{
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#c79bff;
  text-shadow:0 0 6px rgba(199,155,255,.6);
  margin-top:6px;
  opacity:.85;
}

/* ---- Chat panel ---- */
.faire-panel{
  position:absolute;
  bottom:88px;
  right:0;
  width:370px;
  max-width:calc(100vw - 40px);
  height:540px;
  max-height:calc(100vh - 140px);
  background:linear-gradient(180deg, #15111f 0%, #0d0b14 100%);
  border:1px solid rgba(199,155,255,0.25);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(142,123,255,.15);
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.faire-panel.faire-open{ display:flex; animation: faire-panel-in .25s ease; }
@keyframes faire-panel-in{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.faire-panel__header{
  padding:16px 18px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(199,155,255,0.15);
  display:flex;
  align-items:center;
  gap:10px;
}
.faire-panel__avatar{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,0) 40%),
             radial-gradient(circle at 60% 70%, #f4c6ff, #8e7bff 70%);
  flex-shrink:0;
}
.faire-panel__title{ color:#f1eaff; font-weight:700; font-size:.95rem; margin:0; }
.faire-panel__subtitle{ color:#9c8fc2; font-size:.7rem; margin:1px 0 0; }
.faire-panel__close{
  margin-left:auto;
  background:none; border:none; color:#9c8fc2; cursor:pointer;
  font-size:1.1rem; line-height:1; padding:4px;
}
.faire-panel__close:hover{ color:#f1eaff; }

.faire-panel__messages{
  flex:1; overflow-y:auto; padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.faire-msg{
  max-width:85%; padding:10px 13px; border-radius:14px;
  font-size:.87rem; line-height:1.45; white-space:pre-wrap;
}
.faire-msg--user{
  align-self:flex-end;
  background:linear-gradient(135deg,#8e7bff,#6ee7c8);
  color:#0d0b14; font-weight:500;
  border-bottom-right-radius:4px;
}
.faire-msg--bot{
  align-self:flex-start;
  background:rgba(255,255,255,0.06);
  color:#f1eaff;
  border-bottom-left-radius:4px;
}
.faire-msg--error{
  align-self:flex-start;
  background:rgba(255,90,90,0.15);
  color:#ffb4b4;
}

.faire-panel__inputrow{
  display:flex; gap:8px; padding:14px;
  border-top:1px solid rgba(199,155,255,0.15);
  background:rgba(255,255,255,0.02);
}
.faire-panel__input{
  flex:1; background:rgba(255,255,255,0.04);
  border:1px solid rgba(199,155,255,0.2);
  border-radius:12px; color:#f1eaff; padding:10px 13px;
  font-size:.87rem; resize:none; outline:none;
}
.faire-panel__input:focus{ border-color:#c79bff; }
.faire-panel__input::placeholder{ color:#766a93; }

.faire-panel__send{
  background:linear-gradient(135deg,#c79bff,#6ee7c8);
  border:none; border-radius:12px; width:42px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.faire-panel__send:disabled{ opacity:.45; cursor:default; }

@media (max-width: 480px){
  .faire-panel{ width:calc(100vw - 24px); right:-12px; }
}