.whale-pet { position: fixed; z-index: 100; width: 192px; max-width: calc(100vw - 24px); right: max(20px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; flex-direction: column; }
.whale-pet__speech { min-height: 44px; width: 100%; display: grid; place-items: center; margin: 0 0 4px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 14px 14px 14px 3px; background: var(--surface); color: var(--text); font-size: 12px; text-align: center; box-shadow: 0 6px 24px #00000020; }
.whale-pet__character { display: block; width: 100%; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: grab; touch-action: none; }
.whale-pet__sprite { display: block; width: 100%; aspect-ratio: 192 / 208; background-repeat: no-repeat; background-size: 800% 900%; filter: drop-shadow(0 12px 14px #00000035); }
.whale-pet button:hover:not(:disabled) { border-color: var(--accent); }
.whale-pet button:disabled { opacity: .55; cursor: default; }
.whale-pet button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 760px) {
  .whale-pet { width: 160px; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (forced-colors: active) {
  .whale-pet__speech { border: 1px solid ButtonText; }
}

/* Dragged positions use explicit left/top instead of the default corner anchor. */
.whale-pet--detached { right: auto; bottom: auto; }
.whale-pet[data-dragging="true"] .whale-pet__character { cursor: grabbing; }