/* ─────────────────────────────────────────────────────────────────────────────
   MOX — site + dashboard launcher/panel placement (Increment 9B-A)

   assistant.css owns all the shell internals (panel, bubbles, typing dots,
   avatar) and the DEFAULT 2D-editor placement. This file ONLY repositions the
   ONE shared launcher + panel for the public site, Marketplace and dashboard
   pages, scoped to `.lmlsite-mox` so the 2D and 3D studios are untouched.

   Launcher: ~48×48 at the lower-right of the content viewport, safe-area aware,
   above page content but below modals. Panel: anchored bottom-right, grows up +
   left, capped to the viewport, internally scrollable. One launcher per page.
   ──────────────────────────────────────────────────────────────────────────── */

.lmlsite-mox { position: static; }

/* Launcher — fixed lower-right of the viewport. Class+id beats assistant.css's
   bare-id defaults; `!important` guards against its mobile !important rules. */
.lmlsite-mox #mox-launcher {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right)) !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  /* Container fits the natural portrait artwork (same width as the 2D reference);
     the ≥44px accessible target is floored below. Height is auto so the artwork
     is never squashed into a square. */
  width: var(--mox-launcher-art-w) !important;
  height: auto !important;
  min-width: 44px;
  min-height: 44px;
  z-index: 2147480000; /* above page chrome, below native modals if any */
}
/* Visible artwork = the 2D reference size/ratio (never a 48×48 visual box);
   object-fit:contain + height:auto keep the portrait MOX artwork undistorted. */
.lmlsite-mox #mox-launcher-img {
  width: var(--mox-launcher-art-w) !important;
  height: auto !important;
  object-fit: contain;
  aspect-ratio: auto;
}

/* The site launcher is a clean button — no hover speech bubble, no big avatar. */
.lmlsite-mox #mox-bubble { display: none !important; }
.lmlsite-mox #mox-character { display: none !important; }

/* Panel — anchored bottom-right, grows up + left, capped to the viewport so it
   never overflows. The body scrolls internally (assistant.css handles overflow). */
.lmlsite-mox #lml-assistant-shell {
  position: fixed !important;
  right: max(20px, env(safe-area-inset-right)) !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  left: auto !important;
  top: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  z-index: 2147480001;
}
.lmlsite-mox #lml-assistant-panel {
  position: relative;
  max-height: min(70vh, 560px);
}

/* Tablet / small desktop — nudge in from the edge. */
@media (max-width: 1024px) {
  .lmlsite-mox #mox-launcher   { right: 16px !important; bottom: 16px !important; }
  .lmlsite-mox #lml-assistant-shell { right: 16px !important; bottom: 16px !important; }
}

/* Phone — near-full-width panel, safe-area aware, target stays ≥44px. */
@media (max-width: 767px) {
  .lmlsite-mox #mox-launcher {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: var(--mox-launcher-art-w-mobile) !important; height: auto !important;
    min-width: 44px; min-height: 44px;
  }
  .lmlsite-mox #mox-launcher-img { width: var(--mox-launcher-art-w-mobile) !important; height: auto !important; object-fit: contain; aspect-ratio: auto; }
  .lmlsite-mox #lml-assistant-shell {
    right: 10px !important;
    left: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
  }
  .lmlsite-mox #lml-assistant-panel { max-height: min(66vh, 460px) !important; }
  .lmlsite-mox #lml-assistant-footer { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
}

/* ── On-screen keyboard (added 2026-08-18) ───────────────────────────────────
   Site/marketplace/dashboard placement anchors the shell to the bottom of the
   LAYOUT viewport, which the software keyboard overlays rather than resizes.
   mox-keyboard.js measures the overlap with visualViewport and publishes it;
   these rules only exist while .mox-kb-open is set, so the placement above is
   untouched in every other state. */
.mox-kb-open .lmlsite-mox #lml-assistant-shell {
  bottom: calc(10px + var(--mox-kb-inset, 0px)) !important;
}
.mox-kb-open .lmlsite-mox #lml-assistant-panel {
  max-height: calc(100vh - var(--mox-kb-inset, 0px) - 24px) !important;
}
@supports (height: 100dvh) {
  .mox-kb-open .lmlsite-mox #lml-assistant-panel {
    max-height: calc(100dvh - var(--mox-kb-inset, 0px) - 24px) !important;
  }
}