/* AI product page (woocommerce/single-product-ai.php). Self-contained; follows
   the brand file's --primary-color and the add-to-cart --button-color, like the
   chat widget (assets/inc/css/ai-chat.css). The shop has no dark theme, so
   neither does this page: it sits between the shop's own light header and footer.
   Built for customers of 45–60: big type, targets of 48px and more, words
   beside every icon. */
.mai-page {
  --mai-accent: var(--primary-color, #1878f6);
  --mai-buy: var(--button-color, #24b800);
  --mai-text: #1e2124;
  --mai-muted: #565d66;
  --mai-line: #dfe3e8;
  --mai-bubble: #ffffff;
  --mai-glow: color-mix(in srgb, var(--mai-accent) 16%, #ffffff);
  --mai-ring: color-mix(in srgb, var(--mai-accent) 45%, transparent);
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 16px 24px;
  color: var(--mai-text);
  font-size: 17px;
  line-height: 1.5;
}

/* The bottom stack is fixed: the footer ends above it, and everything scrolled
   into view (the bill, its confirm button) stops above it too. The JS keeps
   --mai-dock-h equal to the stack's real height (it grows with the input). */
body.maneks-ai-page { padding-bottom: calc(var(--mai-dock-h, 190px) + 8px); }
html:has(body.maneks-ai-page) { scroll-padding-bottom: calc(var(--mai-dock-h, 190px) + 16px); }

/* ------------------------------------------------------------ the stage */
.mai-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "fig head"
    "fig bubble"
    "fig actions";
  gap: 18px 36px;
  min-height: min(74vh, 660px);
  padding: 32px 32px 0;
  border-radius: 28px;
  /* A soft spotlight behind the presenter, in the shop's own colour. */
  background:
    radial-gradient(ellipse 50% 70% at 22% 64%, var(--mai-glow) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
}
.mai-stage > * { min-width: 0; } /* one unbroken 50-letter word must not widen the stage (B11) */

.mai-presenter {
  grid-area: fig;
  align-self: end;
  margin: 0;
  display: flex;
  justify-content: center;
}
.mai-presenter__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 640px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.14));
  animation: mai-rise 0.6s ease-out both;
}
/* No presenter set yet: the product photo, framed, instead of a cut-out. */
.mai-presenter--photo { align-self: start; padding-bottom: 24px; }
.mai-presenter--none { display: none; }
.mai-presenter--photo .mai-presenter__img { border-radius: 20px; max-height: 420px; filter: none; }

/* ------------------------------------------------------------ name + price (with the bubble) */
.mai-product { grid-area: head; align-self: end; }
.mai-product__name {
  margin: 0 0 4px;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.mai-product__price { font-size: 26px; font-weight: 800; color: var(--mai-accent); }
.mai-product__price del { color: var(--mai-muted); font-weight: 400; font-size: 0.75em; margin-right: 8px; }
.mai-product__price ins { text-decoration: none; }

/* ------------------------------------------------------------ the bubble */
.mai-bubble {
  grid-area: bubble;
  position: relative;
  padding: 22px 26px;
  background: var(--mai-bubble);
  border: 1px solid var(--mai-line);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
  scroll-margin-top: 12px;
  animation: mai-pop 0.45s 0.15s ease-out both;
}
/* The tail points at the presenter. */
.mai-bubble::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 34px;
  width: 20px;
  height: 20px;
  background: var(--mai-bubble);
  border-left: 1px solid var(--mai-line);
  border-bottom: 1px solid var(--mai-line);
  transform: rotate(45deg);
}
.mai-bubble.is-error { border-color: #e7b4ae; }
.mai-bubble.is-error .mai-bubble__text { color: #a8321f; }
/* The input has the focus: "the answer comes HERE". */
/* mai-pop stays listed, or the entrance replays from opacity 0 when the ring ends. */
.mai-bubble.is-calling { animation: mai-pop 0.45s 0.15s ease-out both, mai-call 1.4s ease-out 2; }

.mai-bubble__asked {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--mai-muted);
  overflow-wrap: anywhere;
}
.mai-bubble__text {
  font-size: 19px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.mai-bubble__text a { color: var(--mai-accent); text-decoration: underline; }

.mai-dots { display: inline-flex; gap: 7px; padding: 8px 0; }
.mai-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mai-accent);
  opacity: 0.35;
  animation: mai-dot 1s infinite ease-in-out;
}
.mai-dots i:nth-child(2) { animation-delay: 0.15s; }
.mai-dots i:nth-child(3) { animation-delay: 0.3s; }

/* ------------------------------------------------------------ the bill's buttons */
.mai-actions {
  grid-area: actions;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 28px;
  scroll-margin-top: 12px;
}
.mai-actions:empty { padding-bottom: 24px; }

.mai-order {
  flex: 1 1 100%;
  margin: 0;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 700;
  color: #17602a;
  background: #e8f6ec;
  border-radius: 12px;
}
/* Not paid yet: a waiting note (amber), never the green "placed". */
.mai-order--pending { color: #7a4b00; background: #fff4e0; font-weight: 600; }

.mai-btn {
  flex: 1 1 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 16px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mai-btn:focus-visible { outline: 3px solid var(--mai-text); outline-offset: 2px; }
.mai-btn:disabled { opacity: 0.6; cursor: default; animation: none; }
/* The shop's add-to-cart colour: the one obvious next step, like the chat's confirm button. */
.mai-btn--confirm {
  flex-basis: 100%;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  background: var(--mai-buy);
  animation: mai-pulse 1.8s ease-out infinite;
}
.mai-btn--confirm:hover { color: #fff; filter: brightness(0.92); animation-play-state: paused; }
/* It takes the focus by itself when it appears; the pulse marks it, a dark
   frame looked like a mistake (the chat's confirm button, 1.10). */
.mai-btn--confirm:focus-visible { outline: none; }
.mai-btn__sub { font-size: 14px; font-weight: 600; opacity: 0.95; }
.mai-btn--card,
.mai-btn--paypal,
.mai-btn--ghost {
  color: var(--mai-text);
  background: #fff;
  border-color: var(--mai-line);
}
.mai-btn--card:hover,
.mai-btn--paypal:hover,
.mai-btn--ghost:hover { border-color: var(--mai-accent); }
.mai-btn--paypal { color: #003087; }

.mai-link {
  flex: 1 1 100%;
  padding: 8px;
  min-height: 48px;
  font: inherit;
  font-size: 16px;
  color: var(--mai-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
a.mai-link { display: block; text-align: center; }

/* A short line under the bill (an error of the payment window, the end of a chat). */
.mai-note { flex: 1 1 100%; margin: 0; font-size: 16px; color: var(--mai-muted); }
.mai-note--error { color: #a8321f; }

/* ------------------------------------------------------------ the bottom stack */
.mai-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Full-width bar, content kept to the page's 1180px column. */
  padding: 12px max(16px, calc((100% - 1148px) / 2)) calc(8px + env(safe-area-inset-bottom, 0px));
  color: var(--mai-text);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--mai-line);
  box-shadow: 0 -10px 28px rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(6px);
}
.mai-dock__buttons {
  display: grid;
  grid-auto-columns: minmax(0, 1fr); /* one or two equal buttons */
  grid-auto-flow: column;
  gap: 10px;
}
.mai-dock__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: var(--mai-text);
  background: #fff;
  border: 2px solid var(--mai-accent);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mai-dock__btn svg { flex: 0 0 auto; color: var(--mai-accent); }
.mai-dock__btn:hover { background: var(--mai-glow); }
.mai-dock__btn:focus-visible { outline: 3px solid var(--mai-text); outline-offset: 2px; }

.mai-ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 10px;
  margin: 0;
}
.mai-ask__input {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 160px; /* about five lines, then it scrolls */
  margin: 0;
  padding: 14px 20px;
  font: inherit;
  font-size: 18px; /* ≥16px keeps iOS from zooming in */
  line-height: 1.4;
  color: var(--mai-text);
  background: #fff;
  border: 2px solid #b9c0c9;
  border-radius: 28px;
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
}
.mai-ask__input::placeholder { color: #6b7280; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mai-ask__input:focus { outline: none; border-color: var(--mai-accent); box-shadow: 0 0 0 3px var(--mai-ring); }
.mai-ask__input:disabled { background: #f3f4f6; }
/* Step 2: the assistant asks for the delivery details — the box says "write here". */
.mai-dock.is-asking .mai-ask__input {
  border-color: var(--mai-accent);
  box-shadow: 0 0 0 4px var(--mai-ring);
  animation: mai-ask 2s ease-in-out 3;
}
.mai-ask__send {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: var(--mai-accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.mai-ask__send:focus-visible { outline: 3px solid var(--mai-text); outline-offset: 2px; }
.mai-ask__send:disabled { opacity: 0.5; cursor: default; }
.mai-ask__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--mai-muted); text-align: center; }

/* ------------------------------------------------------------ the two windows (photos, information) */
.mai-sheet {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.72);
}
.mai-sheet[hidden] { display: none; }
.mai-sheet__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  color: var(--mai-text);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: mai-pop 0.25s ease-out both;
}
.mai-sheet--info .mai-sheet__panel { max-width: 820px; }
.mai-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 24px;
  border-bottom: 1px solid var(--mai-line);
}
.mai-sheet__title { margin: 0; flex: 1 1 auto; font-size: 22px; font-weight: 800; line-height: 1.2; }
.mai-sheet__count { margin: 0; font-size: 18px; font-weight: 700; color: var(--mai-muted); white-space: nowrap; }
.mai-sheet__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 20px 8px 16px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--mai-text);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}
.mai-sheet__close:hover { background: #000; }
.mai-sheet__close:focus-visible { outline: 3px solid var(--mai-accent); outline-offset: 2px; }

.mai-gallery { display: flex; flex-direction: column; min-height: 0; padding: 16px 16px 18px; gap: 14px; }
.mai-gallery__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  touch-action: pan-y; /* a sideways swipe is ours, an up/down scroll stays the browser's */
  user-select: none;
}
.mai-gallery__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(68vh, 680px);
  object-fit: contain;
  border-radius: 14px;
  -webkit-user-drag: none;
}
.mai-gallery__img[hidden] { display: none; }
.mai-gallery__arrow {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--mai-text);
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--mai-line);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%);
  cursor: pointer;
}
.mai-gallery__arrow--prev { left: 4px; }
.mai-gallery__arrow--next { right: 4px; }
.mai-gallery__arrow:hover { border-color: var(--mai-accent); }
.mai-gallery__arrow:focus-visible { outline: 3px solid var(--mai-text); outline-offset: 2px; }
.mai-gallery__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 6px;
  justify-content: safe center;
}
.mai-gallery__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid var(--mai-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
.mai-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mai-gallery__thumb[aria-current="true"] { border-color: var(--mai-accent); }
.mai-gallery__thumb:focus-visible { outline: 3px solid var(--mai-text); outline-offset: 2px; }

.mai-sheet__body { min-height: 0; overflow-y: auto; padding: 20px 28px 32px; }
.mai-sheet__body:focus-visible { outline: 3px solid var(--mai-accent); outline-offset: -3px; }
/* The info window shows everything at once: the theme's attribute table opens
   one row and a "show more" button (single-product/product-attributes.php,
   inline display:none), which this page does not want. Other pages keep it. */
.mai-sheet .product-attribute, .mai-sheet .shop_attributes #sku { display: table-row !important; }
.mai-sheet .attributes-toggle-wrapper { display: none !important; }
.mai-text { font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.mai-text__name { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.mai-text h2, .mai-text h3, .mai-text h4 { font-size: 20px; line-height: 1.3; margin: 1.2em 0 0.4em; }
.mai-text img { max-width: 100%; height: auto; }
.mai-text table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 12px 0 0; }
.mai-text th,
.mai-text td { padding: 10px 8px; border-bottom: 1px solid var(--mai-line); text-align: left; vertical-align: top; }
/* The theme's attribute table sizes its own columns; here: name 40 %, value 60 %,
   and words wrap as words (overflow-wrap: anywhere broke "100 % akril" letter by letter). */
.mai-text .shop_attributes th,
.mai-text .shop_attributes td { width: auto !important; font-size: 16px !important; line-height: 1.4 !important; overflow-wrap: break-word; word-break: normal; white-space: normal; }
.mai-text .shop_attributes th { width: 40% !important; padding-left: 0; font-weight: 700; color: var(--mai-muted); }
.mai-text .shop_attributes td { width: 60% !important; text-align: left !important; color: var(--mai-text); }
.mai-text .shop_attributes td p { margin: 0; }

/* The page behind a window does not scroll. */
body.mai-locked { overflow: hidden; }

/* ------------------------------------------------------------ the payment window */
.mai-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 24, 39, 0.55);
}
.mai-modal__box {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  color: var(--mai-text, #1e2124);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: mai-pop 0.25s ease-out both;
  font-size: 16px;
}
.mai-modal__title { margin: 0; font-size: 22px; font-weight: 800; }
.mai-modal__sub { margin: 2px 0 14px; color: var(--mai-muted, #5f6670); }
.mai-modal__lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  margin: 0;
}
.mai-modal__lines dt { font-weight: 400; overflow-wrap: anywhere; }
.mai-modal__lines dd { margin: 0; text-align: right; white-space: nowrap; }
.mai-modal__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--mai-line, #e3e6ea);
  font-size: 18px;
}
.mai-modal__note { margin: 14px 0 0; font-size: 13px; color: var(--mai-muted, #5f6670); }
.mai-modal__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.mai-modal__row .mai-btn--ghost { flex: 0 0 auto; }
.mai-modal__row .mai-btn--confirm { flex: 1 1 200px; }
.mai-modal__wait { margin: 0; font-weight: 700; }

/* ------------------------------------------------------------ motion */
@keyframes mai-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mai-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mai-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes mai-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(36, 184, 0, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(36, 184, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 184, 0, 0); }
}
@keyframes mai-call {
  0%   { box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10), 0 0 0 0 var(--mai-ring); border-color: var(--mai-accent); }
  60%  { box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10), 0 0 0 14px rgba(255, 255, 255, 0); border-color: var(--mai-accent); }
  100% { box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes mai-ask {
  0%, 100% { box-shadow: 0 0 0 4px var(--mai-ring); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--mai-accent) 18%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .mai-presenter__img, .mai-bubble, .mai-modal__box, .mai-sheet__panel, .mai-btn--confirm, .mai-dots i, .mai-dock.is-asking .mai-ask__input { animation: none; }
  /* No movement: a still ring says the same "here". */
  .mai-bubble.is-calling { animation: none; border-color: var(--mai-accent); box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10), 0 0 0 4px var(--mai-ring); }
}

/* ------------------------------------------------------------ tablets */
@media (max-width: 899px) {
  .mai-stage { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 24px; padding: 24px 20px 0; min-height: 0; }
  .mai-presenter__img { max-height: 60vh; }
  .mai-bubble__text { font-size: 18px; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 559px) {
  .mai-page { padding: 8px 10px 16px; font-size: 16px; }
  /* Name + price across the top; presenter left, bubble right; the bill's
     buttons across the full width under both (a 200px bubble is too narrow). */
  .mai-stage {
    grid-template-columns: minmax(140px, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head head"
      "fig bubble"
      "actions actions";
    gap: 12px 12px;
    padding: 14px 10px 0;
    border-radius: 20px;
    background:
      radial-gradient(ellipse 60% 50% at 18% 60%, var(--mai-glow) 0%, rgba(255, 255, 255, 0) 70%),
      linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
  }
  /* The presenter stays beside a long bill while it is read. */
  .mai-presenter { align-self: start; position: sticky; top: 8px; }
  .mai-presenter__img { max-height: 52vh; }
  /* A full-body cut-out squeezed into a phone column is too small to show what
     she holds: show her larger, cropped at the shins and the empty sides, so the
     product in her hands reads at a glance. */
  .mai-presenter:not(.mai-presenter--photo) {
    height: 320px; overflow: hidden; align-items: flex-start;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }
  .mai-presenter:not(.mai-presenter--photo) .mai-presenter__img { height: 390px; max-height: none; width: auto; max-width: none; flex: none; }
  .mai-presenter--photo { padding-bottom: 0; }
  .mai-presenter--photo .mai-presenter__img { max-height: 200px; border-radius: 14px; }
  .mai-product__name { font-size: 21px; }
  .mai-product__price { font-size: 20px; }
  .mai-bubble { align-self: start; padding: 14px 14px; border-radius: 18px; }
  .mai-bubble::before { top: 26px; left: -9px; width: 16px; height: 16px; }
  .mai-bubble__text { font-size: 16px; line-height: 1.5; }
  .mai-bubble__asked { font-size: 14px; }
  .mai-actions { padding-bottom: 20px; }
  .mai-actions:empty { padding-bottom: 12px; }

  /* A bill or a long answer: the bubble takes the full width and the
     presenter steps up beside the name, small; the tail points up at her. */
  .mai-stage.is-long {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas:
      "fig head"
      "bubble bubble"
      "actions actions";
    align-items: center;
  }
  .mai-stage.is-long .mai-presenter { position: static; align-self: center; }
  .mai-stage.is-long .mai-presenter__img { max-height: 118px; animation: none; }
  /* Beside the name during a bill: head to waist, so the product still shows. */
  .mai-stage.is-long .mai-presenter:not(.mai-presenter--photo) { height: 130px; }
  .mai-stage.is-long .mai-presenter:not(.mai-presenter--photo) .mai-presenter__img { height: 230px; max-height: none; }
  .mai-stage.is-long .mai-presenter--photo .mai-presenter__img { max-height: 76px; border-radius: 12px; }
  .mai-stage.is-long .mai-product__name { font-size: 18px; }
  .mai-stage.is-long .mai-product__price { font-size: 18px; }
  .mai-stage.is-long { padding-left: 4px; padding-right: 4px; }
  .mai-stage.is-long .mai-bubble { margin-top: 6px; padding: 14px 12px; }
  .mai-stage.is-long .mai-bubble__text { font-size: 16px; }
  .mai-stage.is-long .mai-bubble::before { top: -9px; left: 30px; transform: rotate(135deg); }

  .mai-dock { gap: 8px; padding: 8px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .mai-dock__buttons { gap: 8px; }
  .mai-dock__btn { gap: 6px; min-height: 56px; padding: 6px 8px; font-size: 15px; line-height: 1.15; }
  .mai-dock__btn svg { width: 20px; height: 20px; }
  .mai-ask { gap: 4px 8px; }
  .mai-ask__input { padding: 14px 16px; font-size: 16px; }
  .mai-ask__note { font-size: 12px; }

  /* Typing on a phone: the keyboard takes half the screen, so the two
     buttons shrink to one line of words — still there, still big enough. */
  .mai-dock.is-typing .mai-dock__btn { min-height: 48px; font-size: 15px; }
  .mai-dock.is-typing .mai-dock__btn svg { display: none; }
  .mai-dock.is-typing .mai-ask__note { display: none; }

  /* Windows on a phone: the whole screen. */
  .mai-sheet { padding: 0; }
  .mai-sheet__panel { max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .mai-sheet__head { padding: 8px 8px 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .mai-sheet__title { font-size: 20px; }
  .mai-sheet__count { font-size: 16px; }
  .mai-gallery { flex: 1 1 auto; justify-content: center; padding: 12px 8px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mai-gallery__img { max-height: 62vh; }
  .mai-sheet__body { padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 359px) {
  /* The smallest phones: a slimmer presenter, so the bubble keeps room for words. */
  .mai-stage { grid-template-columns: minmax(112px, 38%) minmax(0, 1fr); gap: 12px 8px; }
  .mai-presenter:not(.mai-presenter--photo) { height: 270px; }
  .mai-presenter:not(.mai-presenter--photo) .mai-presenter__img { height: 330px; }
  .mai-bubble__text { font-size: 15px; }
  .mai-dock__btn { font-size: 15px; }
  .mai-sheet__close { padding: 8px 14px 8px 10px; }
}