/* ============================================================================
   Fetti in the corner of every page (C131, 2026-10-06).

   The owner: "every page, put fetti on the bottom right corner but make her draggable to other
   places so she wont be blocking if someone is trying to make an order or checking the
   details" - and "I want her walking. Not the icon walking... The mascot walking."

     .fd          the corner she lives in. Fixed on every width; dragged anywhere, and the
                  place is remembered on this device.
     .fd-talk     the small "Talk to me" under her feet - the keyboard's way in, and the
                  arrow keys move her.
     .fd-panel    "Talk to me in English / Tagalog / Taglish / Japtaglish", then Ate / Kuya /
                  just my name.
   ========================================================================= */

.fd {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  touch-action: none;               /* a drag on a phone moves her, not the page */
  pointer-events: none;             /* only she and her buttons take a touch */
}
.fd[data-placed] { right: auto; bottom: auto; }

/* The page's own Fetti, adopted: the corner is the dock now, on every width. */
.fd .fetti-stage,
.fd .fetti-stage[class] {
  position: static;
  margin: 0;
  justify-content: flex-end;
}
.fd .fetti {
  width: clamp(72px, 14vw, 104px) !important;   /* the page asked for its own size; the corner sets it */
  height: auto;
  pointer-events: auto;
  cursor: grab;
}
.fd[data-dragging] .fetti { cursor: grabbing; }
.fd .fetti-bubble { max-width: min(19rem, calc(100vw - 9rem)); font-size: .9rem; margin-bottom: 1.6rem; }
/* In the corner the bubble always sits beside her, so its tail points at her on every width
   (fetti.css turns it downward on a phone, for the in-page stage). */
.fd .fetti-bubble::after {
  right: -13px; left: auto; bottom: 12px; margin-left: 0;
  border: 7px solid transparent;
  border-left-color: var(--paper-raised, #FFFFFF);
  filter: drop-shadow(1px 0 0 var(--rule-strong, #C9CFDD));
}

/* Another Fetti is on screen (the home page's desk): this one steps aside until it is gone. */
.fd { transition: opacity .3s ease; }
.fd[data-away] { opacity: 0; visibility: hidden; }

/* Walking in: the corner itself travels; her legs walk inside it (fetti.css). */
.fd[data-walking] { transition: transform var(--fd-walk, 2400ms) linear; }

.fd-talk {
  pointer-events: auto;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  padding: .38rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--rule-strong, #C9CFDD);
  background: var(--paper-raised, #FFFFFF);
  color: var(--ink, #17252B);
  box-shadow: 0 3px 10px rgba(23, 37, 43, .12);
  cursor: pointer;
}
.fd-talk:focus-visible { outline: 3px solid var(--accent, #274A78); outline-offset: 2px; }

.fd-panel {
  pointer-events: auto;
  width: min(17.5rem, calc(100vw - 2rem));
  padding: .85rem .9rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--rule-strong, #C9CFDD);
  background: var(--paper-raised, #FFFFFF);
  color: var(--ink, #17252B);
  box-shadow: 0 10px 30px rgba(23, 37, 43, .18);
  display: grid;
  gap: .55rem;
}
/* The browser's own [hidden] is the weakest rule on a page; said here as every sheet says it,
   because the corner reaches pages that load no other sheet of ours. */
[hidden] { display: none !important; }
.fd-who { display: grid; gap: .45rem; }
.fd-lang { display: grid; gap: .25rem; }
.fd-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .25rem; }
.fd-select {
  width: 100%; font: inherit; font-size: .92rem; padding: .5rem .6rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--rule-strong, #C9CFDD); background: var(--paper, #F4F5FA); color: var(--ink, #17252B);
}
.fd-select:focus-visible, .fd-close:focus-visible { outline: 3px solid var(--accent, #274A78); outline-offset: 2px; }
.fd-note { margin: 0; font-size: .78rem; color: var(--ink-soft, #4A5A66); }
.fd-close {
  justify-self: end;
  font: inherit;
  font-size: .8rem;
  border: 0;
  background: none;
  color: var(--accent, #274A78);
  text-decoration: underline;
  cursor: pointer;
  padding: .2rem;
}

@media print { .fd { display: none; } }
@media (prefers-reduced-motion: reduce) { .fd[data-walking] { transition: none; } }

/* The corner's panel wears the same looping edge as the speech bubble (owner, 2026-10-06). */
@keyframes fd-edge { to { background-position: 0 0, 300% 0; } }
.fd-panel {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--paper-raised, #FFFFFF), var(--paper-raised, #FFFFFF)) padding-box,
    linear-gradient(120deg, #8FB6E8, #E2A2B1, #F6C9A8, #C9B3EC, #8FB6E8) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: fd-edge 9s linear infinite;
  box-shadow: 0 0 16px rgba(226, 162, 177, .45), 0 10px 30px rgba(23, 37, 43, .18);
}
@media (prefers-reduced-motion: reduce) { .fd-panel { animation: none; } }