/* Mimo, the studio host widget. Sits bottom-right, clear of navigation and page controls. */
.mimo { --m-bg: hsl(18 18% 9%); --m-line: hsl(30 40% 93% / .14); --m-fg: hsl(30 40% 93%); --m-muted: hsl(32 18% 75%); --m-accent: hsl(36 92% 58%);
  position: fixed; right: 16px; bottom: 12px; z-index: 60; font-family: var(--font-body, Inter, sans-serif); color: var(--m-fg);
  pointer-events: none; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.mimo.mimo-in { opacity: 1; transform: none; }
.mimo > * { pointer-events: auto; }
.mimo[hidden] { display: none; }

.mimo-launch { display: block; margin-left: auto; width: 128px; height: 156px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; }
.mimo-launch:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.mimo-stage { position: relative; display: block; width: 100%; height: 100%; }
.mimo-poster, .mimo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.mimo-canvas { opacity: 0; transition: opacity .4s; }
.mimo-stage.mimo-3d .mimo-canvas { opacity: 1; }
.mimo-stage.mimo-3d .mimo-poster { opacity: 0; transition: opacity .4s .1s; }
.mimo-poster { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.mimo-canvas { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }

/* Greeting bubble */
.mimo-bubble { position: relative; width: min(300px, calc(100vw - 32px)); margin: 0 0 6px auto; padding: 16px 16px 14px; background: var(--m-bg);
  border: 1px solid var(--m-line); border-radius: 14px 14px 4px 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .45); }
.mimo-bubble p { margin: 0 22px 12px 0; font-size: 15px; line-height: 1.45; }
.mimo-bubble[hidden] { display: none; }
.mimo-choices { display: grid; gap: 8px; }
.mimo-choices button, .mimo-chips button { font: 500 13px var(--font-body, Inter, sans-serif); color: var(--m-fg); background: transparent; cursor: pointer;
  border: 1px solid hsl(30 40% 93% / .3); border-radius: 999px; padding: 9px 14px; text-align: left; min-height: 40px; transition: border-color .2s, background-color .2s; }
.mimo-choices button:hover, .mimo-chips button:hover { border-color: var(--m-accent); background: hsl(36 92% 58% / .1); }
.mimo-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--m-muted); font-size: 20px; cursor: pointer; border-radius: 50%; }
.mimo-x:hover { color: var(--m-fg); }

/* Conversation panel */
.mimo-panel { display: flex; flex-direction: column; width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100vh - 200px)); margin: 0 0 8px auto;
  background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 16px; box-shadow: 0 18px 48px rgb(0 0 0 / .55); overflow: hidden; }
.mimo-panel[hidden] { display: none; }
.mimo-panel header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--m-line); }
.mimo-face { width: 44px; height: 44px; border-radius: 50%; background: hsl(20 14% 16%); object-fit: cover; object-position: top; }
.mimo-panel header strong { display: block; font-size: 15px; }
.mimo-panel header span { display: block; font-size: 12px; color: var(--m-muted); }
.mimo-ctl { margin-left: auto; display: flex; gap: 2px; }
.mimo-ctl button { width: 34px; height: 34px; border: 0; background: none; color: var(--m-muted); font-size: 17px; border-radius: 8px; cursor: pointer; }
.mimo-ctl button:hover { color: var(--m-fg); background: hsl(30 40% 93% / .08); }
.mimo-ctl button[aria-pressed="true"] { color: var(--m-accent); }
.mimo-ctl button.off { text-decoration: line-through; }
.mimo-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.mimo-msg { max-width: 88%; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; }
.mimo-bot { background: hsl(20 14% 15%); border-top-left-radius: 4px; }
.mimo-user { align-self: flex-end; background: hsl(36 92% 56%); border-top-right-radius: 4px; }
.mimo-msg a { color: var(--m-fg); text-decoration: underline; text-underline-offset: 3px; }
.mimo-msg b { font-weight: 600; }
.mimo-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.mimo-chips:empty { display: none; }
.mimo-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--m-line); }
.mimo-input input { flex: 1; min-width: 0; font: 400 16px var(--font-body, Inter, sans-serif); color: var(--m-fg); background: hsl(20 14% 14%);
  border: 1px solid hsl(30 40% 93% / .15); border-radius: 10px; padding: 10px 12px; }
.mimo-input input:focus { outline: 2px solid var(--m-accent); outline-offset: 0; }
.mimo-input button { width: 44px; border: 0; border-radius: 10px; background: hsl(36 92% 56%); color: var(--m-fg); font-size: 18px; cursor: pointer; }
.mimo-note { margin: 0; padding: 0 14px 10px; font-size: 11.5px; color: var(--m-muted); }
.mimo-note a { color: var(--m-muted); text-decoration: underline; text-underline-offset: 2px; }
.mimo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* When the chat is open the character shrinks beside it. */
.mimo.mimo-open .mimo-launch { width: 96px; height: 118px; }

.mimo-return { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: hsl(32 18% 75%); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mimo-return:hover { color: hsl(36 92% 58%); }

@media (max-width: 639px) {
  .mimo { right: 10px; bottom: 8px; }
  .mimo-launch { width: 86px; height: 106px; }
  .mimo.mimo-open .mimo-launch { width: 70px; height: 86px; }
  .mimo-panel { height: min(520px, calc(100vh - 150px)); }
}
.mimo.mimo-still, .mimo.mimo-still * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .mimo, .mimo * { transition: none !important; } }

.mimo-stage.mimo-3d { cursor: grab; }
.mimo-stage.mimo-3d:active { cursor: grabbing; }

/* Flight: lift above page content while swooping. */
.mimo.mimo-flying .mimo-launch { position: relative; z-index: 70; will-change: transform; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .35)); }

/* Proximity glow behind Mimo, stronger on hover. */
.mimo-stage::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 4%; height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(36 92% 58% / .55), hsl(36 92% 58% / 0)); opacity: calc(var(--mimo-near, 0) * .7);
  transform: scale(calc(.85 + var(--mimo-near, 0) * .2)); transition: opacity .2s, transform .2s; pointer-events: none; }
.mimo.mimo-hover .mimo-stage::before { opacity: 1; transform: scale(1.12); }
/* Click pops: little stars and hearts bursting out. */
.mimo-pop { position: absolute; z-index: 2; font-size: 15px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%);
  animation: mimo-pop .75s cubic-bezier(.2, .9, .3, 1.2) forwards; text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
@keyframes mimo-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot)); }
}
.mimo.mimo-still .mimo-pop { display: none; }

.mimo.mimo-pulled .mimo-stage { cursor: grabbing; }

/* Dizzy: birds, flowers and a star circling the head; they follow it to the floor when Mimo falls. */
.mimo-birds { position: absolute; left: 50%; top: 13%; width: 0; height: 0; z-index: 3; pointer-events: none; transition: left .4s ease-in, top .4s ease-in; }
.mimo-birds.down { left: 82%; top: 74%; }
.mimo-birds span { position: absolute; font-size: 17px; line-height: 1; animation: mimo-orbit 1.2s linear infinite; }
@keyframes mimo-orbit {
  0% { transform: translate(-50%, -50%) translate(36px, 0) scale(1); }
  12.5% { transform: translate(-50%, -50%) translate(25px, 7px) scale(1.1); }
  25% { transform: translate(-50%, -50%) translate(0, 10px) scale(1.15); }
  37.5% { transform: translate(-50%, -50%) translate(-25px, 7px) scale(1.1); }
  50% { transform: translate(-50%, -50%) translate(-36px, 0) scale(1); }
  62.5% { transform: translate(-50%, -50%) translate(-25px, -7px) scale(.85); }
  75% { transform: translate(-50%, -50%) translate(0, -10px) scale(.8); }
  87.5% { transform: translate(-50%, -50%) translate(25px, -7px) scale(.85); }
  100% { transform: translate(-50%, -50%) translate(36px, 0) scale(1); }
}
.mimo.mimo-dizzy .mimo-stage { cursor: default; }

.mimo-birds[hidden] { display: none; }