/* Corner pagedoll overlay — the profile owner's main Seeker + main Puffling, tethered
   to the viewport's bottom-right corner instead of laid out in `.profile-header` (the old
   `.profile-pagedoll*` rules this file replaces lived in static/css/site.css).

   Loaded only from templates/accounts/profile_detail.html, and only when the
   `pagedolls` context list is non-empty, alongside static/css/character_sprites.css
   (which supplies `.char-sprite`/`.char-sprite--animated` itself — this file is
   layout, sizing, dismiss chrome and the pet bounce only).

   (Do not quote a comment terminator inside this comment: CSS comments do not nest, so
   an inner one would end this block early and the prose after it would be parsed as
   CSS — see apps/common/tests_stylesheets.py, which exists because that exact mistake
   once silently dropped a rule from this feature's very first version.) */

/* The dismiss button sets `overlay.hidden = true` (static/js/pagedolls.js). That alone
   is NOT enough: the browser's own `[hidden] { display: none }` comes from the user-agent
   stylesheet, and the author-origin `display: flex` below beats it outright, so without
   this rule the dismiss button ran, stored its localStorage flag, and changed nothing on
   screen. Any element given both a `display` of its own and a `hidden` toggle needs this
   pairing — static/css/mini_sprite_preview.css does the same for its own two panes. */
.pagedoll-overlay[hidden] {
  display: none;
}

.pagedoll-overlay {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* Above ordinary page content (the nav dropdown sits at z-index: 20-30 in
     static/css/site.css) but below `.modal-overlay`'s z-index: 200 there — a modal
     must always be able to paint over this corner. 150 matches the value house.css's
     `.house-charline` already uses for the same "above content, below modal" slot. */
  z-index: 150;
  /* The flex box itself must never intercept a click meant for whatever page content
     sits in the gap between the two dolls or below the dismiss button — only the
     buttons themselves (re-enabled below) are meant to be clickable. */
  pointer-events: none;
}

.pagedoll-dismiss,
.pagedoll-doll {
  pointer-events: auto;
}

.pagedoll-doll {
  display: block;
  height: 160px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

/* ~700px is the same breakpoint house.css's editor palette switches on. Shrinks, does
   not disappear — a small doll in the corner still beats none on a phone. */
@media (max-width: 700px) {
  .pagedoll-doll {
    height: 70px;
  }
}

.pagedoll-art {
  display: block;
  height: 100%;
  width: auto;
  border-radius: 8px;
}

.pagedoll-doll:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Petting: a short squash-and-stretch, then back. Same keyframe SHAPE as
   static/css/house.css's `@keyframes house-pet`, copied rather than imported — the
   profile page does not load house.css unconditionally (only when a house is shown),
   so this stylesheet cannot depend on it. */
@keyframes pagedoll-pet {
  0%   { scale: 1 1; }
  30%  { scale: 1.12 0.88; }
  60%  { scale: 0.94 1.06; }
  100% { scale: 1 1; }
}

.pagedoll-doll.is-petted .pagedoll-art {
  animation: pagedoll-pet 0.45s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pagedoll-doll.is-petted .pagedoll-art {
    animation: none;
  }
}

/* Small "x" dismiss control, top-right corner of the whole overlay. `.pagedoll-overlay`
   is itself `position: fixed`, which establishes the containing block this positions
   against, so no extra `position: relative` wrapper is needed. */
.pagedoll-dismiss {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.pagedoll-dismiss:hover,
.pagedoll-dismiss:focus-visible {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  outline: none;
}