/* The Michi section (Heng, 31/10/2026): full viewport, full width. Over it, the heading (below). Left: his
   full figure. Right: the webchat itself, held in the page by widget.michi.js. The chat's own stylesheet still loads; the rules below only re-seat it. They are
   scoped to #mm-mst-chat so they cannot reach the floating widget, and they need !important because
   widget.css sizes the panel with !important on a phone.
   Same file for MM Carz and BM Garage. */
.mm-michi { background: #fbf8f2; }

/* The heading over the section (Heng, 01/11/2026: "meet michi uses new michi font ... same background
   colour"): the homepage block's logo, lead and pill on the section's own ivory. "Meet Michi." is
   michi-title.svg, the mascot sheet's lettering (trace_title.py), not a font. No background here, and the
   section's own glow fades out to nothing at its edges, so there is no line where the two meet. */
.mm-mhead { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: clamp(32px, 6vh, 64px) 20px clamp(4px, 1vh, 12px); text-align: center; color: #01255e; }
.mm-mhead__logo { display: block; width: auto; height: clamp(44px, 6vh, 60px); max-width: 100%; margin: 0 0 clamp(12px, 2vh, 20px); }
.mm-mhead__title { width: min(100%, 620px); margin: 0; line-height: 0; color: #01255e; }
.mm-mhead__title svg { display: block; width: 100%; height: auto; }
/* The lettering only says it in English. */
.mm-mhead__word { display: block; line-height: 1.15; font: 800 clamp(34px, 5.4vw, 64px)/1.15 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mm-mhead__lead { max-width: 720px; margin: clamp(14px, 2.2vh, 22px) 0 0; font: 400 clamp(16px, 1.3vw, 19px)/1.55 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: rgba(1, 37, 94, .78); text-wrap: balance; }
.mm-mhead__live { display: inline-flex; align-items: center; gap: 9px; margin-top: clamp(14px, 2vh, 20px); font: 600 14px/1.2 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mm-mhead__live i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }

.mm-mst {
  --ink: #01255e;
  --hint: 32px;
  --fig-h: min(calc(100svh - 104px), 52vw);
  /* What is left over, shared above him and under the hint. His soles stop 2.4% short of the figure's
     bottom edge. The input's bottom edge is set from these, so it stands level with his shoes. */
  --pad: calc((100svh - var(--fig-h) - var(--hint)) / 2);
  --sole: calc(var(--fig-h) * .024);
  position: relative; box-sizing: border-box; width: 100%; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  color: var(--ink);
  background: radial-gradient(60% 46% at 26% 46%, #fff 0%, rgba(255, 255, 255, 0) 100%); /* gone by the top edge: see .mm-mhead */
}

/* ---- Left: the figure ------------------------------------------------------------------------ */
.mm-mst__left { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: var(--pad) 0 0; }
/* With the voice button out of the input, this line is how anyone finds out he talks, so it stays through
   the text chat and only steps aside during a call. */
.mm-mst__hint { display: inline-flex; align-items: center; gap: 7px; flex: none; height: var(--hint); margin: 0; padding: 0 12px; border: 0; background: none; cursor: pointer; font: 600 14px/1 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: rgba(1, 37, 94, .76); transition: opacity .3s, color .2s; -webkit-tap-highlight-color: transparent; }
.mm-mst__hint:hover { color: var(--ink); }
.mm-mst__hint:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.mm-mst__hint svg { flex: none; width: 11px; height: 13px; overflow: visible; fill: currentColor; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.mm-mst.is-talking .mm-mst__hint { opacity: 0; pointer-events: none; }

.mi-fig { position: relative; display: block; flex: none; height: var(--fig-h); width: calc(var(--fig-h) * 780 / 940); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mi-fig:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 24px; }
.mi-sway, .mi-br, .mi-head, .mi-arm { position: absolute; inset: 0; display: block; }
.mi-sway, .mi-br { transform-origin: 50% 97%; }
/* Without the body rig (michi-stage.js, no WebGL) the whole figure sways. With it his feet stay planted. */
.mi-fig:not(.gl) .mi-sway { animation: mi-sway 7.4s ease-in-out infinite; }
.mi-fig:not(.gl) .mi-br { animation: mi-breath 4.3s ease-in-out infinite; }
.mi-fig.gl .mi-body { visibility: hidden; }
.mi-fig.gl .mi-head { transition: none; }
.mi-arm { transform-origin: 33.59% 54.79%; will-change: transform; }
.mi-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Pivots: the neck (450,478), the near shoulder (262,515) on the 780x940 canvas. */
.mi-head { transform-origin: 57.7% 50.9%; transition: transform .55s cubic-bezier(.3, .7, .3, 1); will-change: transform; }
.mi-head.live { transition: none; }
.mi-face { position: absolute; left: 33.3333%; top: 24.6809%; width: 51.2821%; height: 17.0213%; overflow: visible; }
/* His near arm hangs at his side. To wave it goes up through drawn in-betweens (.mi-swing, wave_frames.py: the
   sleeve fans out from the shoulder, the hand a little behind it) into the painted raised arm (.mi-up,
   wave_arm.py), and the wave itself is the fist turning at the wrist (200,535). Exactly one of the three shows
   at any moment. All of it sits under the head: his cheek overhangs the shoulder, so a raised hand tucks in
   behind it instead of lying on his face, skin on skin. */
.mi-hand { will-change: opacity; }
.mi-up { position: absolute; inset: 0; display: block; opacity: 0; transform-origin: 33.59% 54.79%; will-change: transform, opacity; }
.mi-fist { transform-origin: 25.64% 56.91%; will-change: transform; }
/* wave_frames.py's BOX on the 780x940 canvas, and its 11 frames in one row. */
.mi-swing { position: absolute; left: 0; top: 44.6809%; width: 43.5897%; height: 39.3617%; display: block; overflow: hidden; opacity: 0; will-change: opacity; }
.mi-swing img { display: block; width: 1100%; max-width: none; height: 100%; will-change: transform; }
.mi-arm.wave .mi-hand { animation: mi-hide 3s step-end; }
.mi-arm.wave .mi-swing { animation: mi-swing 3s step-end; }
.mi-arm.wave .mi-swing img { animation: mi-flip 3s; }
.mi-arm.wave .mi-up { animation: mi-show 3s step-end, mi-up 3s ease-in-out; }
.mi-arm.wave .mi-fist { animation: mi-fist 3s ease-in-out; }
.mi-floor { position: absolute; left: 9%; right: 11%; bottom: .6%; height: 7%; background: radial-gradient(closest-side, rgba(1, 37, 94, .26), rgba(1, 37, 94, 0)); will-change: transform; }

@keyframes mi-sway { 0%, 100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg); } }
@keyframes mi-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.012); } }
/* 0.42 s up, the wave, 0.42 s down. Which arm shows changes on a step, never a fade: a fade shows two arms
   see-through. The in-betweens end one step from the raised arm with the fist at -30deg, so the raised arm
   must be square (rotate(0)) with the fist at -30deg at both 14% and 86%. check_wave.py holds these frames. */
@keyframes mi-hide { 0%, 100% { opacity: 0; } }
@keyframes mi-swing { 0% { opacity: 1; } 14% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes mi-show { 0% { opacity: 0; } 14% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes mi-flip {
  /* jump-none counts positions, not jumps: 11 frames is steps(11). steps(10) walks 1/9 of the strip a step. */
  0% { transform: translateX(0); animation-timing-function: steps(11, jump-none); }
  14% { transform: translateX(-90.9091%); }
  86% { transform: translateX(-90.9091%); animation-timing-function: steps(11, jump-none); }
  100% { transform: translateX(0); }
}
@keyframes mi-up {
  0%, 14% { transform: rotate(0); animation-timing-function: ease-out; }
  20% { transform: rotate(3.5deg); }
  27% { transform: rotate(0); }
  39%, 63% { transform: rotate(1.5deg); }
  51% { transform: rotate(-1deg); }
  76%, 100% { transform: rotate(0); }
}
@keyframes mi-fist {
  0%, 14% { transform: rotate(-30deg); }
  27%, 51% { transform: rotate(-8deg); }
  39%, 63% { transform: rotate(-30deg); }
  75% { transform: rotate(-10deg); }
  86%, 100% { transform: rotate(-30deg); }
}

/* ---- Right: the chat ------------------------------------------------------------------------- */
.mm-mst__right { position: relative; display: flex; justify-content: center; min-width: 0; min-height: 0; padding: var(--pad) clamp(20px, 4.5vw, 72px) calc(var(--pad) + var(--hint) + var(--sole)) clamp(8px, 1vw, 20px); }
#mm-mst-chat { display: flex; flex-direction: column; width: 100%; max-width: 660px; height: 100%; min-height: 0; }

#mm-mst-chat #mm-chat-panel.mm-inline {
  display: flex !important;
  position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; z-index: auto !important; overflow: visible !important;
}

/* The header's job is done by the left column: only the language button stays, top right. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-header { position: absolute !important; top: 14px; right: clamp(14px, 2vw, 28px); z-index: 6; min-height: 0; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-brand, #mm-mst-chat #mm-close-btn { display: none !important; }
/* The conversation starts level with the top of his cap (.mm-mst__right's top padding) and fills down
   toward the input. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-body { flex: 1 1 auto; min-height: 0; padding: 4px 4px 10px; gap: 12px; background: transparent !important; }

#mm-mst-chat #mm-chat-panel.mm-inline .mm-msg { font-size: 16px; line-height: 1.5; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-msg * { font-size: inherit; line-height: inherit; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-msg.bot { background: #fff; color: #14233f; border: 1px solid rgba(1, 37, 94, .1); box-shadow: 0 6px 22px rgba(1, 37, 94, .06); }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-msg.user { background: var(--ink) !important; color: #fff !important; }

/* The pills: the widget's own opening options, sized for a page instead of a 430px panel. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-quickactions-row { display: flex !important; flex-wrap: wrap; gap: 8px; max-width: 100%; margin-top: 6px; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn {
  min-height: 38px; padding: 0 15px; font-size: 14px; font-weight: 500; border-radius: 999px; white-space: nowrap;
  background: #fff !important; color: var(--ink) !important; border: 1px solid rgba(1, 37, 94, .24) !important;
}
#mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn * { font-size: 14px; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn:hover { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn svg, #mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn .mm-chip-icon { width: 15px !important; height: 15px !important; }

#mm-mst-chat #mm-chat-panel.mm-inline .mm-footer { position: relative; padding: 8px 0 0 !important; background: transparent !important; border: 0 !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-input-card { background: #fff !important; border: 1px solid rgba(1, 37, 94, .16) !important; border-radius: 20px !important; box-shadow: 0 12px 34px rgba(1, 37, 94, .09); }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-input { background: transparent !important; }
/* The line under the input hangs below it, so the input's own edge is what meets his shoes. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-branding { position: absolute; top: 100%; left: 0; right: 0; background: transparent !important; padding: 8px 0 0; }
/* You talk to him by tapping him. The chat's voice button stays in the page, unseen: michi-stage.js presses it. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-mic { display: none !important; }

/* Voice: the same overlay, across the whole column, without his round head (he is standing beside
   it) and over no background of its own. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-overlay { position: absolute !important; inset: 0 !important; z-index: 5; background: transparent !important; padding: var(--pad) clamp(20px, 4.5vw, 72px) calc(var(--pad) + var(--hint) + var(--sole)) clamp(8px, 1vw, 20px) !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-orb-wrap { display: none !important; }
/* The overlay is see-through here, so the text chat under it steps aside for the call. */
.mm-mst.is-talking #mm-mst-chat #mm-chat-panel.mm-inline .mm-body, .mm-mst.is-talking #mm-mst-chat #mm-chat-panel.mm-inline .mm-footer { visibility: hidden; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-send { background: var(--ink) !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-status { font-size: 17px; color: var(--ink); }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-transcript { flex: 1 1 auto; width: 100%; max-width: 660px; min-height: 0; max-height: none !important; font-size: 16px; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-exit { top: 14px; right: auto; left: clamp(8px, 1vw, 20px); }
/* The same width and the same spot as the text input, so nothing jumps when a call starts. */
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-compose { box-sizing: border-box; width: 100%; max-width: 660px; background: transparent !important; border: 0 !important; padding: 8px 0 0 !important; }
#mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-lang { display: none; }

/* ---- Phone, or anything narrower than it is tall: Michi on top, chat under him. Once a conversation
   starts he steps back so the words have the room. ------------------------------------------------ */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .mm-mhead__title { width: min(100%, 460px); }
  .mm-mst { --hint: 24px; --fig-h: 26vh; --fig-h: 26svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: radial-gradient(90% 30% at 50% 30%, #fff 0%, rgba(255, 255, 255, 0) 100%); }
  .mm-mst.is-chatting, .mm-mst.is-talking { --fig-h: 15vh; --fig-h: 15svh; }
  .mm-mst__left { padding: max(10px, env(safe-area-inset-top)) 0 2px; justify-content: center; }
  .mi-fig { transition: height .3s, width .3s; }
  .mm-mst__hint { font-size: 13px; }
  .mm-mst__right { position: static; padding: 4px 14px max(10px, env(safe-area-inset-bottom)); }
  #mm-mst-chat { max-width: none; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-body > :first-child { margin-top: auto; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-branding { position: static; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-msg { font-size: 15px; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-quickaction-btn * { font-size: 13px; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-header { top: 8px; right: 10px; }
  /* On a phone the overlay spans the section, so the status starts under his feet. */
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-overlay { padding: calc(15vh + 24px) 14px 10px !important; padding-top: calc(15svh + 24px) !important; }
  #mm-mst-chat #mm-chat-panel.mm-inline .mm-voice-exit { left: 14px; top: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .mm-mst { --hint: 24px; --fig-h: min(calc(100svh - 40px), 40vw); }
}

@media (prefers-reduced-motion: reduce) {
  .mi-sway, .mi-br, .mi-arm.wave .mi-hand, .mi-arm.wave .mi-swing, .mi-arm.wave .mi-swing img, .mi-arm.wave .mi-up, .mi-arm.wave .mi-fist { animation: none; }
  .mi-head { transition: none; }
}