luna-openclaw,
:host {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: env(safe-area-inset-bottom, 0px);
  width: 96px;
  z-index: 30;
  font-family: var(--font-sans, system-ui), sans-serif;
  color: var(--color-ink-1, #f5f5f5);
  animation: lr-claw-arrive 1ms 5s both;
}
luna-openclaw:not(:defined),
:host([hidden]) {
  display: none;
}
.lr-claw {
  position: relative;
}
.lr-claw summary {
  display: flex;
  justify-content: center;
  height: 78px;
  overflow: hidden;
  cursor: pointer;
  list-style: none;
  border-radius: 14px 14px 0 0;
}
.lr-claw summary::-webkit-details-marker {
  display: none;
}
.lr-claw summary:focus-visible {
  outline: 2px solid var(--color-accent, #ff816c);
  outline-offset: -3px;
}
.lr-claw-art {
  flex: none;
  overflow: visible;
  animation: lr-claw-peek 850ms 5s both cubic-bezier(0.22, 1, 0.36, 1);
}
.lr-claw-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: lr-claw-blink 6.5s 6s infinite;
}
.lr-claw-pupils {
  animation: lr-claw-look 9s 5.9s infinite;
}
.lr-claw-left,
.lr-claw-right {
  transform-box: fill-box;
  transform-origin: center;
  animation: lr-claw-wave 7s 6s infinite;
}
.lr-claw-right {
  animation-direction: reverse;
}
.lr-claw[open] .lr-claw-art * {
  animation-play-state: paused;
}
.lr-claw-bubble {
  position: absolute;
  right: 4px;
  bottom: 92px;
  box-sizing: border-box;
  width: min(270px, calc(100vw - 40px));
  padding: 20px;
  background: var(--color-surface, #242424);
  border: 1px solid var(--color-line, #454545);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 8px 28px #0003;
}
.lr-claw-bubble::after {
  content: '';
  position: absolute;
  right: 32px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-right: inherit;
  border-bottom: inherit;
  transform: rotate(45deg);
}
.lr-claw-bubble p {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.lr-claw-bubble a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-accent, #ff816c);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lr-claw-bubble a:focus-visible,
.lr-claw-dismiss:focus-visible {
  outline: 2px solid var(--color-accent, #ff816c);
  outline-offset: 3px;
}
.lr-claw-dismiss {
  position: absolute;
  right: -10px;
  top: -24px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg, #181818);
  color: var(--color-ink-4, #a0a0a0);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.lr-claw-dismiss:hover {
  color: var(--color-ink-1, #fff);
}
luna-openclaw[data-entry='right'],
:host([data-entry='right']) {
  right: env(safe-area-inset-right, 0px);
  top: 50vh;
  bottom: auto;
  width: 44px;
  transform: translateY(-50%);
}
:host([data-entry='right']) summary {
  height: 96px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 14px 0 0 14px;
}
:host([data-entry='right']) .lr-claw-art {
  transform: rotate(-90deg);
  animation-name: lr-claw-peek-side;
}
:host([data-entry='right']) .lr-claw-bubble {
  right: calc(100% + 10px);
  bottom: 0;
  width: min(270px, calc(100vw - 80px - env(safe-area-inset-right, 0px)));
  border-radius: 16px;
}
:host([data-entry='right']) .lr-claw-bubble::after {
  right: -6px;
  bottom: 38px;
  transform: rotate(-45deg);
}
:host([data-entry='right']) .lr-claw-dismiss {
  right: 0;
}
luna-openclaw[data-idle],
:host([data-idle]),
:host([data-idle]) .lr-claw-art,
:host([data-idle]) .lr-claw-art * {
  animation-play-state: paused;
}
@keyframes lr-claw-arrive {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}
@keyframes lr-claw-peek {
  from {
    transform: translateY(100%) rotate(-10deg);
  }
  to {
    transform: translateY(0) rotate(0);
  }
}
@keyframes lr-claw-peek-side {
  from {
    transform: translateX(100%) rotate(-80deg);
  }
  to {
    transform: translateX(0) rotate(-90deg);
  }
}
@keyframes lr-claw-blink {
  0%,
  22%,
  26%,
  68%,
  72%,
  100% {
    transform: scaleY(1);
  }
  24%,
  70% {
    transform: scaleY(0.08);
  }
}
@keyframes lr-claw-look {
  0%,
  14%,
  48%,
  100% {
    transform: translate(0, 0);
  }
  20%,
  36% {
    transform: translate(-0.45px, -0.2px);
  }
  60%,
  80% {
    transform: translate(0.45px, 0.1px);
  }
}
@keyframes lr-claw-wave {
  0%,
  45%,
  100% {
    transform: rotate(0);
  }
  52%,
  62% {
    transform: rotate(-12deg);
  }
  57%,
  67% {
    transform: rotate(4deg);
  }
}
@media (max-width: 600px) {
  luna-openclaw,
  :host {
    right: max(12px, env(safe-area-inset-right));
    width: 80px;
  }
  .lr-claw summary {
    height: 64px;
  }
  .lr-claw-art {
    width: 72px;
    height: 72px;
  }
  .lr-claw-bubble {
    bottom: 82px;
  }
  :host([data-entry='right']) summary {
    height: 80px;
  }
  :host([data-entry='right']) .lr-claw-art {
    margin-left: 8px;
  }
}
@media (pointer: coarse) {
  .lr-claw-dismiss {
    width: 44px;
    height: 44px;
    top: -34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lr-claw-art,
  .lr-claw-art *,
  :host([data-entry='right']) .lr-claw-art {
    animation: none;
  }
}