/* =====================================================================
   FEEDBACK GURU — floating feedback chat bot
   Uses the host page's CSS variables (--ink, --glass, --blur, etc.)
   so it always matches the current Language Play theme (light/dark).
   ===================================================================== */

#fbotToggle{
  position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;
  width:60px;height:60px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(160deg,#FF8CC6,#C22E86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 28px rgba(194,46,134,.38), 0 4px 10px rgba(11,27,51,.18);
  display:grid;place-items:center;font-size:26px;
  animation:fbotFloat 3.2s ease-in-out infinite;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
#fbotToggle:hover{transform:translateY(-3px) scale(1.04)}
#fbotToggle:active{transform:scale(.92)}
#fbotToggle:focus-visible{outline:2.5px solid var(--sky, #4FB3F6);outline-offset:3px}
@keyframes fbotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#fbotToggle.fbot-open{background:linear-gradient(160deg,#8DA0C2,#43536E)}

#fbotToggle .fbot-pip{
  position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;
  background:var(--green,#3FBF6F);border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(63,191,111,.25);
  animation:fbotPulse 2.4s ease-in-out infinite;
}
@keyframes fbotPulse{0%,100%{opacity:1}50%{opacity:.35}}

#fbotPanel{
  position:fixed;right:18px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:59;
  width:min(92vw,360px);max-height:min(72vh,560px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--hairline);border-radius:28px;
  box-shadow:inset 0 1px 0 var(--inset), var(--shadow-lift);
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
}
#fbotPanel.fbot-visible{opacity:1;transform:none;pointer-events:auto}

#fbotHead{
  display:flex;align-items:center;gap:11px;padding:14px 14px 12px;
  background:linear-gradient(160deg, rgba(255,140,198,.28), rgba(194,46,134,.16));
  border-bottom:1px solid var(--edge);
}
#fbotHeadCat{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:19px;background:var(--glass-strong);border:1px solid var(--hairline);
  box-shadow:inset 0 1px 0 var(--inset);
}
#fbotHeadCopy{flex:1;min-width:0;text-align:left}
#fbotTitle{font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
#fbotSub{font-size:11px;font-weight:500;color:var(--ink2);margin-top:1px}
#fbotClose{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
  background:var(--glass-soft);color:var(--ink2);font-size:13px;
}
#fbotClose:hover{background:var(--glass)}

#fbotBody{
  flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;
}
#fbotBody::-webkit-scrollbar{width:5px}
#fbotBody::-webkit-scrollbar-thumb{background:var(--edge);border-radius:3px}

.fbot-msg{
  max-width:82%;padding:9px 13px;border-radius:16px;font-size:13px;line-height:1.5;
  text-align:left;font-weight:500;letter-spacing:-.005em;word-wrap:break-word;
  animation:fbotIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes fbotIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fbot-msg.bot{
  align-self:flex-start;color:var(--ink);
  background:var(--glass-soft);border:1px solid var(--hairline);
  border-bottom-left-radius:5px;
}
.fbot-msg.user{
  align-self:flex-end;color:#fff;
  background:linear-gradient(160deg,#FF8CC6,#C22E86);
  border-bottom-right-radius:5px;
}
.fbot-msg.err{
  align-self:center;color:var(--ink2);background:transparent;border:1px dashed var(--edge);
  font-size:11.5px;
}

.fbot-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 13px;
  background:var(--glass-soft);border:1px solid var(--hairline);border-radius:16px;border-bottom-left-radius:5px}
.fbot-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:fbotDot 1.1s ease-in-out infinite}
.fbot-typing span:nth-child(2){animation-delay:.15s}
.fbot-typing span:nth-child(3){animation-delay:.3s}
@keyframes fbotDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

#fbotQuick{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 10px}
.fbot-chip{
  border:1px solid var(--hairline);background:var(--glass-soft);color:var(--ink);
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.fbot-chip:hover{background:var(--glass);transform:translateY(-1px)}
.fbot-chip:active{transform:scale(.96)}

#fbotForm{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-top:1px solid var(--edge);
}
#fbotInput{
  flex:1;min-width:0;border:1px solid var(--hairline);background:var(--glass-soft);
  color:var(--ink);border-radius:999px;padding:10px 15px;font-size:13px;font-weight:500;
  outline:none;
}
#fbotInput::placeholder{color:var(--ink3)}
#fbotInput:focus{border-color:var(--sky,#4FB3F6)}
#fbotSend{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(160deg,#FF8CC6,#C22E86);color:#fff;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s ease;
}
#fbotSend:hover{transform:scale(1.05)}
#fbotSend:active{transform:scale(.92)}
#fbotSend:disabled{opacity:.5;cursor:default;transform:none}

@media (max-width:420px){
  #fbotPanel{right:10px;left:10px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
  #fbotToggle{right:14px}
}

@media (prefers-reduced-motion:reduce){
  #fbotToggle, #fbotToggle .fbot-pip, .fbot-msg, .fbot-typing span{animation:none !important}
}