/* Mingo - ui/flamingo.css: Mingo the flamingo in the extension (ui/flamingo.js). The larger view only (app.html), at the window's
   bottom-right, small (--mf-h), wading at the bottom edge; and asleep in the corner of the new tab's first-run welcome. Colours from
   ui/theme.css (--flamingo-* and the ground's tokens), so it follows light and dark. Asleep until someone is with it; no idle life,
   no blinking, no fades, no hover box; the only motions are the lid sliding and a wing wave under a mouse, both gone under reduced
   motion. Pages make room for it: body.has-mf reserves --mf-clear at the bottom of every page (app/app.css). */

.mf {
  --mf-h: 104px;                                   /* the flamingo's height (the SVG's 180 x 202 box, water included) */
  --mf-w: calc(var(--mf-h) * 180 / 202);
  --mf-water: color-mix(in srgb, var(--fg) 30%, transparent);
  --mf-water-hi: var(--glass-hi);
  position: fixed; z-index: 20;
  right: 16px; bottom: 0;
  width: var(--mf-w); height: var(--mf-h);
  pointer-events: none;
  font-family: var(--font-ui);
}
.mf [hidden] { display: none !important; }

/* the button: only the painted flamingo takes the pointer, so its empty corners never block the page; no box, ever (theme.css paints
   every button:hover / :active with a fill - overridden here at a higher specificity) */
.mf .mf-btn, .mf .mf-btn:hover, .mf .mf-btn:active {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-md); background: none; box-shadow: none; color: inherit;
  cursor: pointer; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.mf .mf-btn:focus-visible { box-shadow: var(--focus-ring); }
.mf-art { display: block; width: 100%; height: 100%; overflow: visible; }
.mf-hit { pointer-events: visiblePainted; }
.mf-pad { pointer-events: fill; }   /* an unpainted pad around body, neck and head: a sure hit area without the empty corners */
.mf-pupil { transform: translate(var(--mf-look-x, 0px), var(--mf-look-y, 0px)); }

/* the colours (tokens in ui/theme.css) */
.mf-c-body { fill: var(--flamingo-body); }
.mf-c-neck { stroke: var(--flamingo-body); }
.mf-c-deep { fill: var(--flamingo-deep); }
.mf-c-leg { stroke: var(--flamingo-leg); }
.mf-c-beak { fill: var(--flamingo-beak); }
.mf-c-ink { fill: var(--flamingo-ink); }
.mf-c-inkline { stroke: var(--flamingo-ink); }
.mf-c-eye { fill: var(--flamingo-eye); }
.mf-water, .mf-ripple-back { stroke: var(--mf-water); }
.mf-water-2, .mf-ripple { stroke: var(--mf-water-hi); }

/* asleep by default: the lid down and a closed-eye line; .is-awake (flamingo.js) slides the lid up (a transform, never a fade) */
.mf-wing { transform-box: fill-box; transform-origin: 76% 91%; }
.mf-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(1); transition: transform .22s cubic-bezier(.3, .7, .3, 1); }
.mf-shut { visibility: visible; transition: visibility 0s .2s; }
.mf.is-awake .mf-lid { transform: scaleY(0); }
.mf.is-awake .mf-shut { visibility: hidden; transition-delay: 0s; }
.mf:not(.is-awake) .mf-pupil { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .mf .mf-btn:hover .mf-wing { animation: mf-wave .9s ease-in-out; }
}
@keyframes mf-wave {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(16deg); }
  45% { transform: rotate(2deg); }
  68% { transform: rotate(16deg); }
}

/* ---------- the speech bubble: an opaque plate above the head, its tail at the beak ---------- */
.mf-bubble {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(300px, calc(100vw - 32px));
  padding: 16px 18px 18px; border-radius: var(--radius-xl); border-bottom-right-radius: 6px;
  pointer-events: auto; text-align: left; color: var(--fg);
  background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: var(--shadow-3);
}
.mf:has(.mf-bubble:not([hidden]))::after {
  content: ""; position: absolute; bottom: calc(100% + 12px - 6.5px); right: 12px;
  width: 16px; height: 16px; transform: rotate(45deg); pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: var(--surface); border-right: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge);
}
.mf-title { margin: 0 32px 14px 0; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.45; color: var(--fg); }
.mf .mf-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: none; color: var(--fg-2);
  --press-bg: var(--press-quiet);
}
.mf .mf-close::before { content: ""; position: absolute; inset: -6px; }   /* a 44 px hit area */
@media (hover: hover) and (pointer: fine) { .mf .mf-close:hover { background: var(--fill-quiet); color: var(--fg); } }
/* the one action: the theme's filled capsule, as a link (it opens learnmingo.com's contact page in a new tab) */
.mf-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 18px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
@media (hover: hover) and (pointer: fine) { .mf-link:hover { background: var(--current-hover); color: var(--on-accent); text-decoration: none; } }
.mf-link:active { background: color-mix(in srgb, var(--current-hover) 84%, #000); }

/* ---------- asleep in the welcome's corner: the same drawing, a little smaller, never a control ---------- */
.mf-sleeper { --mf-h: 96px; z-index: 0; }
.mf-sleeper .mf-btn { cursor: default; }

/* ---------- reduced motion: it stands still (the eye opens and shuts at once) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mf-lid, .mf-shut { transition: none; }
  .mf .mf-btn:hover .mf-wing { animation: none; }
}
@media (forced-colors: active) {
  .mf-bubble { border-color: CanvasText; }
}