/* Fen companion — floating mascot (logical properties → auto-RTL).
   Fixed positioning: zero layout impact, zero CLS. Motion is transform/
   opacity only and fully disabled under prefers-reduced-motion. */

.qet-fen {
  position: fixed;
  inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 14px;
  z-index: 80;
  inline-size: 96px;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.16, .84, .44, 1), opacity .3s ease;
}
/* single-Fen rule: duck away while a page-local Fen is on screen */
.qet-fen.is-yield {
  transform: translateY(160%);
  opacity: 0;
}
.qet-fen.is-yield * { pointer-events: none !important; }

.qet-fen-btn {
  position: relative;
  display: block;
  inline-size: 96px;
  block-size: 128px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  animation: qet-fen-in .55s cubic-bezier(.16, .84, .44, 1) both,
             qet-fen-bob 5.2s ease-in-out .6s infinite;
  transform-origin: 50% 95%;
}
.qet-fen-btn:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 4px;
  border-radius: 14px;
}

.qet-fen-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  transition: opacity .4s ease;
  filter: drop-shadow(0 10px 14px rgba(17, 24, 39, .22));
}
.qet-fen-img.is-on { opacity: 1; }

/* dismiss × — appears on hover/focus-within */
.qet-fen-close {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 0;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border: 1px solid #E9EAF2;
  border-radius: 50%;
  background: #fff;
  color: #6B7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .2s ease;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .12);
}
.qet-fen:hover .qet-fen-close,
.qet-fen:focus-within .qet-fen-close { opacity: 1; }
.qet-fen-close:focus-visible { outline: 2px solid #6366F1; outline-offset: 2px; }

/* speech bubble — anchored above, tail pointing down at Fen */
.qet-fen-bubble {
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-end: 0;
  inline-size: max-content;
  max-inline-size: min(58vw, 240px);
  padding: 10px 13px;
  background: #fff;
  border: 1px solid #E9EAF2;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .12);
  font-size: .82rem;
  line-height: 1.45;
  color: #111827;
  text-align: start;
  pointer-events: none;
}
.qet-fen-bubble::after {
  content: "";
  position: absolute;
  inset-block-end: -6px;
  inset-inline-end: 30px;
  inline-size: 12px;
  block-size: 12px;
  background: #fff;
  border-inline-end: 1px solid #E9EAF2;
  border-block-end: 1px solid #E9EAF2;
  transform: rotate(45deg);
}
.fen-pop { animation: qet-fen-pop .34s cubic-bezier(.16, .84, .44, 1); }

/* micro-motion wiggle, triggered by JS every 20–40s */
.fen-fx .qet-fen-btn { animation: qet-fen-in .55s both, qet-fen-bob 5.2s ease-in-out .6s infinite, qet-fen-wiggle .7s ease-in-out; }

@keyframes qet-fen-in {
  from { opacity: 0; transform: translateY(30%) scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes qet-fen-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes qet-fen-wiggle {
  0%, 100% { rotate: 0deg; }
  30%      { rotate: -4deg; }
  65%      { rotate: 3deg; }
}
@keyframes qet-fen-pop {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* footer restore link */
.fen-restore {
  border: 0;
  background: none;
  padding: 0;
  color: #6B7280;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.fen-restore:hover { color: #111827; }

@media (max-width: 640px) {
  .qet-fen { inline-size: 76px; }
  .qet-fen-btn { inline-size: 76px; block-size: 101px; }
}

@media (prefers-reduced-motion: reduce) {
  .qet-fen *, .qet-fen { animation: none !important; transition: none !important; }
  .qet-fen-img.is-on { opacity: 1; }
}