/* Xiaomo v7: original porcelain companion, one continuous silhouette.
   Presentation only. No simulated operational progress. */
.xiaomo-dock, .xiaomo-dock[aria-pressed="true"] {
  width: 96px; height: 96px; right: 16px; bottom: 14px;
  padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; touch-action: manipulation;
}
.xiaomo-dock::after { display: none; }
.xiaomo-dock:focus-visible { outline: 2px solid var(--mos-text); outline-offset: 0; border-radius: 18px; }
.xiaomo-character { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 87%; }
.xm-presence { display: block; position: absolute; inset: 0; transform-origin: 50% 87%; }
.xiaomo-dock .xm-frame, .xiaomo-dock:hover .xm-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; transform: none; transition: none; user-select: none;
}
.xm-frame--closed { opacity: 0; }
.xm-frame--open { opacity: 1; }
/* Breathing and nearby attention are independent transforms, never image slices. */
[data-motion="full"][data-awake="true"] .xiaomo-character {
  transform: translate(var(--xm-x, 0px), var(--xm-y, 0px)) rotate(var(--xm-tilt, 0deg));
  transition: transform 420ms cubic-bezier(.2,.65,.3,1);
}
[data-motion="full"][data-awake="true"] .xm-presence { animation: xm-breathe 7.4s ease-in-out infinite; }
/* Two brief blinks in an uneven cycle; no continuous eye squashing. */
[data-motion="full"][data-awake="true"] .xm-frame--open { animation: xm-open-eyes 13.7s steps(1) infinite; }
[data-motion="full"][data-awake="true"] .xm-frame--closed { animation: xm-closed-eyes 13.7s steps(1) infinite; }
[data-pose="sleeping"] .xm-frame--open, [data-pose="blink"] .xm-frame--open { opacity: 0; }
[data-pose="sleeping"] .xm-frame--closed, [data-pose="blink"] .xm-frame--closed { opacity: 1; }
[data-motion="full"][data-pose="confirmed"] .xm-presence { animation: xm-nod 840ms ease-in-out 1; }
[data-motion="full"][data-pose="hover"] .xm-presence { animation: xm-ack 900ms ease-in-out 1; }
[data-motion="full"][data-pose="waking"] .xm-presence { animation: xm-wake 560ms ease-out 1; }
[data-motion="full"][data-pose="workspace"] .xm-presence { animation: xm-ack 900ms ease-in-out 1; }
[data-motion="full"][data-pose="stretch"] .xm-presence { animation: xm-stretch 1600ms ease-in-out 1; }
[data-motion="full"][data-pose="yawn"] .xm-presence { animation: xm-stretch 1600ms ease-in-out 1; }
[data-paused="true"] .xiaomo-character, [data-paused="true"] .xm-presence, [data-paused="true"] .xm-frame {
  animation-play-state: paused !important; transition: none !important;
}
[data-motion="reduced"] .xiaomo-character, [data-motion="off"] .xiaomo-character,
[data-motion="reduced"] .xm-presence, [data-motion="off"] .xm-presence,
[data-motion="reduced"] .xm-frame, [data-motion="off"] .xm-frame {
  animation: none !important; transition: none !important; transform: none !important;
}
/* An optional floating companion never reserves a blank column in the app. */
.companion__home { display: contents; }
.companion__perch { width: 80px; height: 80px; flex: 0 0 80px; }
.companion__perch .xiaomo-dock { position: relative; inset: auto; width: 80px; height: 80px; margin: 0; z-index: auto; }
.companion--drawer {
  position: fixed; width: min(380px, calc(100vw - 32px)); right: 16px; bottom: 16px;
  padding: 18px; max-height: min(620px, calc(100dvh - 88px)); margin: 0; overflow: auto;
  border: 1px solid var(--mos-border); border-radius: 18px; background: var(--mos-surface-raised);
  box-shadow: 0 12px 44px rgb(0 0 0 / .12); overscroll-behavior: contain;
}
.companion__head { gap: 10px; align-items: center; }
.companion__head > div { min-width: 0; }
.companion__title { font-size: 14px; line-height: 21px; }
.companion__label { font-size: 11px; line-height: 17px; }
.companion__state { min-height: 20px; padding: 8px 0; border-bottom: 1px solid var(--mos-border); }
.companion__close { min-width: 32px; min-height: 32px; align-self: flex-start; }
.companion__close svg { width: 16px; height: 16px; }
.companion__body { font-size: 13px; line-height: 1.7; }
.companion__suggestions { gap: 6px; }
.companion__suggestions button { border-radius: 7px; padding: 6px 9px; }
.companion__conversation { display: block; padding: 0; }
.companion__question, .companion__answer { max-width: none; border-radius: 0; background: transparent; padding: 10px 0; margin: 0; }
.companion__question { font-weight: 600; border-top: 1px solid var(--mos-border); }
.companion__answer { padding-top: 0; line-height: 1.7; color: var(--mos-text-muted); }
.companion__form { border-top: 1px solid var(--mos-border); padding-top: 12px; }
.companion__form [disabled] { cursor: wait; opacity: .6; }
:root:not([data-auth-state="authenticated"]) .companion__home,
:root:not([data-auth-state="authenticated"]) .companion--drawer { display: none !important; }
/* The presentation board keeps all operational signals unobstructed. */
:root:has(.shell[data-cortex-wallboard="true"]) .companion__home,
:root:has(.shell[data-cortex-wallboard="true"]) .companion--drawer { display: none !important; }
@keyframes xm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.006, 1.012); } }
@keyframes xm-open-eyes { 0%, 29%, 75%, 100% { opacity: 1; } 27.8%, 73.8% { opacity: 0; } }
@keyframes xm-closed-eyes { 0%, 29%, 75%, 100% { opacity: 0; } 27.8%, 73.8% { opacity: 1; } }
@keyframes xm-nod { 0%, 100% { transform: none; } 42% { transform: translateY(1px) rotate(1.4deg); } 72% { transform: rotate(-.5deg); } }
@keyframes xm-ack { 0%, 100% { transform: none; } 48% { transform: rotate(-2deg) scale(1.008); } }
@keyframes xm-wake { from { transform: scale(.99); } 75% { transform: scale(1.006); } to { transform: none; } }
@keyframes xm-stretch { 0%, 100% { transform: none; } 60% { transform: scale(1.01, 1.024) rotate(-1deg); } }
@media (max-width: 767px) {
  .xiaomo-dock, .xiaomo-dock[aria-pressed="true"] { width: 76px; height: 76px; right: 10px; bottom: 10px; }
  .companion--drawer { right: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 16px; }
  .companion__perch, .companion__perch .xiaomo-dock { width: 72px; height: 72px; flex-basis: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .xiaomo-character, .xm-presence, .xm-frame { animation: none !important; transition: none !important; transform: none !important; }
}
