/* learnmingo.com - Mingo the flamingo (flamingo.js): wading at the window's bottom-right, cut at the knees by the edge with a
   faint water line + ripple at the cut; a real button that opens a glass speech bubble with a small contact form. Uses the
   site's --w-* / --wg-* tokens (site.css), so it follows light and dark. Motion: a blink, a rare head tilt, a wing wave on
   hover (fine pointers), a hop after sending, a short slide down while the footer is on screen; never a fade, and nothing
   at all under reduced motion. */

.mf {
  --mf-h: 130px;                                  /* the flamingo's height (the SVG's 180 x 202 box, water included) */
  --mf-w: calc(var(--mf-h) * 180 / 202);
  --mf-water: light-dark(rgba(84, 106, 138, .34), rgba(176, 196, 236, .34));
  --mf-water-hi: light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .16));
  position: fixed; z-index: 20;
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  bottom: env(safe-area-inset-bottom, 0px);
  width: var(--mf-w); height: var(--mf-h);
  pointer-events: none;
  transition: transform .34s cubic-bezier(.3, .7, .3, 1);
  font: 15px/1.5 var(--w-font, system-ui, sans-serif);
}
.mf.is-sunk { transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + 6px)); }
.mf [hidden] { display: none !important; }

/* ---------- the button: only the painted flamingo takes the pointer, so the empty corners never block the page ---------- */
.mf-btn {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 18px;
  background: none; color: inherit; cursor: pointer; pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.mf-btn:focus { outline: none; }
/* no box, ever: the site loads the extension theme, whose generic button:hover / :active paint a fill - override at higher specificity */
.mf .mf-btn, .mf .mf-btn:hover, .mf .mf-btn:active { background: none; box-shadow: none; border: 0; }
.mf-pupil { transform: translate(var(--mf-look-x, 0px), var(--mf-look-y, 0px)); }
.mf-btn:focus-visible { outline: 2px solid var(--w-current, #3b6ea8); outline-offset: 2px; }
.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 */

/* the water at the cut: a faint line, two short strokes and a ripple around the legs (back half behind them) */
.mf-water, .mf-ripple-back { stroke: var(--mf-water); }
.mf-water-2 { stroke: var(--mf-water-hi); }
.mf-ripple { stroke: var(--mf-water-hi); }

/* ---------- idle life (transforms only) ---------- */
.mf-wing { transform-box: fill-box; transform-origin: 76% 91%; }
.mf-head { transform-box: fill-box; transform-origin: 26% 86%; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }
/* asleep by default: the lid down and a closed-eye line; .is-awake (flamingo.js) slides the lid up */
.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; }
.mf-art.is-tilt .mf-head { transform: rotate(var(--mf-tilt, 6deg)); }
.mf-art.is-hop { animation: mf-hop .52s cubic-bezier(.3, .7, .3, 1); }
@keyframes mf-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-9%); } 62% { transform: translateY(0); } 78% { transform: translateY(-2.5%); } }
@media (hover: hover) and (pointer: fine) {
  .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: a glass plate above the head, its tail at the beak ---------- */
.mf-bubble {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(316px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - var(--mf-h) - 40px); max-height: calc(100dvh - var(--mf-h) - 40px);
  overflow: auto; overscroll-behavior: contain;
  padding: 16px 18px 18px; border-radius: var(--w-radius, 16px);
  border-bottom-right-radius: 6px;   /* the corner the tail leaves from */
  pointer-events: auto; text-align: left; color: var(--w-ink, #1a1c22);
  background: var(--wg-sheen, none), var(--wg-plate, rgba(252, 248, 242, .94)); border: 1px solid var(--wg-brd, rgba(255, 255, 255, .6));
  box-shadow: var(--wg-shadow, 0 10px 30px -6px rgba(70, 45, 20, .2));
  -webkit-backdrop-filter: var(--wg-plate-blur, blur(22px) saturate(1.6)); backdrop-filter: var(--wg-plate-blur, blur(22px) saturate(1.6));
}
/* the tail lives outside the scroll box: a pseudo-element of the root, shown with the bubble */
.mf:has(.mf-bubble:not([hidden]))::after {
  content: ""; position: absolute; bottom: calc(100% + 12px - 6.5px); right: 12px;   /* its tip over the beak */
  width: 16px; height: 16px; transform: rotate(45deg); pointer-events: none;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);   /* only the half below the bubble's edge */
  background: var(--wg-plate, rgba(252, 248, 242, .94));
  border-right: 1px solid var(--wg-brd, rgba(255, 255, 255, .6)); border-bottom: 1px solid var(--wg-brd, rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: var(--wg-plate-blur, blur(22px) saturate(1.6)); backdrop-filter: var(--wg-plate-blur, blur(22px) saturate(1.6));
}

.mf-title { margin: 0 32px 12px 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--w-ink, #1a1c22); }
.mf-close {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--w-ink-2, #5a5f6b);
}
.mf-close::before { content: ""; position: absolute; inset: -6px; }   /* a 44px hit area */
@media (hover: hover) and (pointer: fine) { .mf-close:hover { background: var(--w-in-hov, rgba(255, 255, 255, .92)); color: var(--w-ink, #1a1c22); } }
.mf-close:focus-visible { outline: none; box-shadow: var(--w-ring, 0 0 0 3px rgba(59, 110, 168, .28)); }

.mf-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mf-field { display: flex; flex-direction: column; gap: 5px; }
.mf-field label { font-size: 13px; font-weight: 600; color: var(--w-ink, #1a1c22); }
.mf-field input, .mf-field textarea {
  width: 100%; height: 36px; padding: 0 14px; margin: 0;
  font: 15px/1.5 var(--w-font, system-ui, sans-serif); color: var(--w-ink, #1a1c22);
  background: var(--w-in-hov, #fff); border: 1px solid var(--w-in-brd, rgba(0, 0, 0, .1)); border-radius: 999px; box-shadow: none;
}
.mf-field textarea { height: 96px; min-height: 72px; padding: 8px 14px; border-radius: 14px; resize: vertical; }
.mf-field input:focus-visible, .mf-field textarea:focus-visible {
  outline: none; border-color: color-mix(in srgb, var(--w-ink, #1a1c22) 45%, transparent); box-shadow: var(--w-ring, 0 0 0 3px rgba(59, 110, 168, .28));
}
.mf-field [aria-invalid="true"] { border-color: var(--w-seal, #c62828); }
.mf-err, .mf-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--w-seal-text, #c62828); }
.mf-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.mf-send {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 88px; padding: 0 18px; margin: 2px 0 0;
  border: 0; border-radius: 999px; background: var(--w-current, #3b6ea8); color: var(--w-on-current, #fff);
  font: 500 14px/1 var(--w-font, system-ui, sans-serif); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .mf-send:hover:not(:disabled) { background: var(--w-current-hov, #34619a); } }
.mf-send:active:not(:disabled) { background: color-mix(in srgb, var(--w-current-hov, #34619a) 84%, #000); }
.mf-send:focus-visible { outline: none; box-shadow: var(--w-ring, 0 0 0 3px rgba(59, 110, 168, .28)); }
.mf-send:disabled { cursor: progress; opacity: .7; }

.mf-done { margin: 0 32px 0 0; font-size: 15px; line-height: 1.5; color: var(--w-ink, #1a1c22); }
.mf-done:focus { outline: none; }

/* ---------- phones ---------- */
@media (max-width: 640px), (max-height: 560px) {
  .mf { --mf-h: 96px; }
}
/* phones: it never sinks, so the page ends with room for it and nothing (the footer links) sits under it */
@media (pointer: coarse), (max-width: 640px) {
  body:has(.mf) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- reduced motion: it stands still ---------- */
@media (prefers-reduced-motion: reduce) {
  .mf, .mf-head, .mf-lid, .mf-shut { transition: none; }
  .mf-lid, .mf-shut, .mf-art.is-hop, .mf-btn:hover .mf-wing { animation: none; }
  .mf-art.is-tilt .mf-head { transform: none; }
}
@media (forced-colors: active) {
  .mf-bubble { border-color: CanvasText; }
}

/* touch: 44px fields and button, 16px text so iOS does not zoom on focus */
@media (pointer: coarse) {
  .mf-field input { height: 44px; }
  .mf-field input, .mf-field textarea { font-size: 16px; }
  .mf-send { height: 44px; }
}