.ophelia-mascot {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  width: 88px;
  overflow: visible;
  isolation: isolate;
  pointer-events: none;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ophelia-mascot[data-position="left"] {
  right: auto;
  left: 16px;
}

.ophelia-mascot__button,
.ophelia-mascot__panel {
  pointer-events: auto;
}

.ophelia-mascot__button {
  display: block;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  touch-action: manipulation;
}

.ophelia-mascot__button:focus-visible,
.ophelia-mascot__panel button:focus-visible,
.ophelia-mascot__panel a:focus-visible {
  outline: 3px solid #8fffd1;
  outline-offset: 3px;
}

.ophelia-mascot__sprite {
  display: block;
  width: 88px;
  height: 88px;
  background-image: url("/mascot/ophelia-actions-v2.png");
  background-position: 0 0;
  background-size: 400% 300%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 14px rgba(16, 9, 30, .48));
  transform-origin: 50% 82%;
  will-change: transform;
  animation: ophelia-idle 4.6s ease-in-out infinite;
}

.ophelia-mascot[data-state="idle"] .ophelia-mascot__sprite { background-position: 0 0; }
.ophelia-mascot[data-state="walk"] .ophelia-mascot__sprite { background-position: 33.333% 0; }
.ophelia-mascot[data-state="run"] .ophelia-mascot__sprite { background-position: 66.667% 0; }
.ophelia-mascot[data-state="hop"] .ophelia-mascot__sprite { background-position: 100% 0; }
.ophelia-mascot[data-state="jump"] .ophelia-mascot__sprite { background-position: 0 50%; }
.ophelia-mascot[data-state="dance"] .ophelia-mascot__sprite { background-position: 33.333% 50%; }
.ophelia-mascot[data-state="laugh"] .ophelia-mascot__sprite { background-position: 66.667% 50%; }
.ophelia-mascot[data-state="cry"] .ophelia-mascot__sprite { background-position: 100% 50%; }
.ophelia-mascot[data-state="angry"] .ophelia-mascot__sprite { background-position: 0 100%; }
.ophelia-mascot[data-state="yell"] .ophelia-mascot__sprite { background-position: 33.333% 100%; }
.ophelia-mascot[data-state="work"] .ophelia-mascot__sprite { background-position: 66.667% 100%; }
.ophelia-mascot[data-state="success"] .ophelia-mascot__sprite { background-position: 100% 100%; }

.ophelia-mascot[data-speaking="true"] .ophelia-mascot__sprite {
  filter: drop-shadow(0 0 12px rgba(111, 240, 192, .9)) drop-shadow(0 8px 14px rgba(16, 9, 30, .48));
}

.ophelia-mascot[data-state="hop"] .ophelia-mascot__sprite,
.ophelia-mascot[data-state="jump"] .ophelia-mascot__sprite {
  animation: ophelia-hop 1.15s ease-out;
}

.ophelia-mascot[data-state="dance"] .ophelia-mascot__sprite {
  animation: ophelia-dance 1.25s ease-in-out infinite alternate;
}

.ophelia-mascot[data-paused="true"] .ophelia-mascot__sprite {
  animation: none;
}

.ophelia-mascot__panel {
  position: absolute;
  right: 0;
  bottom: 96px;
  width: min(292px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(209, 185, 255, .35);
  border-radius: 16px;
  color: #f6f0ff;
  background: rgba(22, 13, 39, .96);
  box-shadow: 0 18px 50px rgba(8, 4, 18, .48);
  max-height: min(440px, calc(100dvh - 128px));
  overflow-y: auto;
}

.ophelia-mascot[data-position="left"] .ophelia-mascot__panel {
  right: auto;
  left: 0;
}

.ophelia-mascot__panel[hidden],
.ophelia-mascot__chat[hidden],
.ophelia-mascot__reactions[hidden] {
  display: none;
}

.ophelia-mascot__panel p {
  margin: 0 0 12px;
}

.ophelia-mascot__panel a {
  color: #8fffd1;
  display: inline-flex;
  margin: 8px 4px 0;
}

.ophelia-mascot__reactions,
.ophelia-mascot__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ophelia-mascot__controls {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(209, 185, 255, .2);
}

.ophelia-mascot__panel button {
  border: 1px solid rgba(209, 185, 255, .3);
  border-radius: 999px;
  padding: 7px 10px;
  color: inherit;
  background: rgba(209, 185, 255, .09);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

@keyframes ophelia-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes ophelia-hop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-18px); }
}

@keyframes ophelia-dance {
  from { transform: rotate(-4deg) translateY(-2px); }
  to { transform: rotate(4deg) translateY(1px); }
}

@media (max-width: 640px) {
  .ophelia-mascot {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: 68px;
  }

  .ophelia-mascot[data-position="left"] { left: 8px; }
  .ophelia-mascot__button,
  .ophelia-mascot__sprite { width: 68px; height: 68px; }
  .ophelia-mascot__panel {
    bottom: 76px;
    width: min(292px, calc(100vw - 16px));
  }
}

.ophelia-mascot--form-safe {
  position: relative;
  right: auto;
  bottom: auto;
  margin: 16px max(16px, env(safe-area-inset-right)) 16px auto;
}

.ophelia-mascot--form-safe[data-position="left"] {
  left: auto;
  margin-right: auto;
  margin-left: max(16px, env(safe-area-inset-left));
}

@media (prefers-reduced-motion: reduce) {
  .ophelia-mascot__sprite {
    animation: none !important;
    transition: none !important;
  }
}