/* The Dressing Room (@ovi 2026-10-28). Lives IN the page, so scrolling is the browser's. */
#ovi-room {
  position: relative; width: 100%; overflow: hidden;
  touch-action: pan-y;              /* the page scrolls; only a held tile is ours */
}
/* `touch-action` is decided at touch-start and CANNOT be changed once the finger is
   down. Leaving a garment on pan-y meant the browser claimed any upward drag as a page
   pan and cancelled the pointer mid-move, so dragging one up to the hanger silently
   failed. The garment owns its gesture; the bare floor around it keeps pan-y, and a
   flick that starts on a garment is passed to the page by hand below. */
#ovi-room .ovi-tile {
  position: absolute; width: var(--ovi-tw, 124px);
  cursor: grab; z-index: 1; will-change: transform;
  touch-action: none;
}
#ovi-room .ovi-tile.ovi-held { cursor: grabbing; }
#ovi-room .ovi-tile img {
  display: block; width: 100%; height: auto; border: 0; border-radius: 2px;
  pointer-events: none; -webkit-user-drag: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.34)) drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transition: filter .18s ease;
}
#ovi-room .ovi-tile.ovi-held img { filter: drop-shadow(0 22px 38px rgba(0,0,0,.5)); }
#ovi-room .ovi-tile.ovi-gone { opacity: 0; transform: scale(.72); transition: all .26s ease; }

/* The hanger. Sticky, so it is always to hand however far down the room you are, and on
   the LEFT, so the whole site reads one direction: left is away, right is yes. That is the
   deck's grammar — swipe left to forget, right to keep — and the room now matches it.
   The cart, when Robin gives the word, goes opposite it on the right. */
/* WHY THESE ARE FIXED AND NOT STICKY.
   Robin: "hanger and card need to follow the acreen i cant have to drag items all the way
   to top of dressing room window to put back or buy."

   They WERE sticky, and sticky was never going to work here. A sticky element is clipped
   to its nearest ancestor with overflow:hidden, and BOTH #ovi-room and #ovi-win-body have
   it — neither of which scrolls. So it never engaged against the page and simply sat at
   the top of a room that is at least 1.25 screens tall. Fixed is what "follow the screen"
   actually means, and the script moves both of these onto <body> so no ancestor can clip
   them or re-base them. Hit testing is unaffected: it compares getBoundingClientRect
   against pointer clientX/clientY, and both are viewport coordinates either way. */
#ovi-hanger {
  position: fixed; left: 10px; z-index: 2147483000; margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  color: #111; background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.28); border-radius: 999px;
  padding: 7px 10px; cursor: default;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  transition: transform .16s ease, background .16s ease;
}
#ovi-hanger.ovi-ready { transform: scale(1.12); background: #fff; }
#ovi-hanger svg { width: 26px; height: 22px; display: block; flex: 0 0 auto; }
/* Robin: "remove the word 'take it off' from hanger." The hanger is a hanger. */

/* The cart, opposite the hanger. Robin, when I first put it beside: "i didnt say beside i
   said across from or oposite too." So: hanger hard left, cart hard right, and the page
   reads one direction throughout — left is away, right is yes, the same grammar as the
   deck's swipe. Drop a garment on it and it goes in the shop's cart. */
#ovi-cart {
  position: fixed; right: 10px; z-index: 2147483000; margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  color: #111; background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.28); border-radius: 999px;
  padding: 7px 10px; cursor: default;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  transition: transform .16s ease, background .16s ease;
}
#ovi-cart.ovi-ready { transform: scale(1.12); background: #fff; }
#ovi-cart svg { width: 24px; height: 22px; display: block; flex: 0 0 auto; }
#ovi-cart .ovi-cart-n {
  font: 600 11px/16px var(--ovi-body, system-ui, sans-serif);
  min-width: 17px; height: 17px; border-radius: 999px; text-align: center;
  background: #111; color: #fff;
}
#ovi-cart .ovi-cart-n[hidden] { display: none; }
#ovi-cart.ovi-done { background: #1c8c4a; color: #fff; }

/* What a double tap opens: the item's own page, under the room, one per item, each with
   its own way out. Robin: "there shoyld be an x to remove the tav when user is done." */
#ovi-peek { width: 100%; }
#ovi-peek:empty { display: none; }
.ovi-peek-tile { width: 100%; margin: 0 0 10px; border: 1px solid rgba(128,128,128,.34); }
.ovi-peek-head {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: rgba(128,128,128,.14);
  font: 600 13px/1.2 var(--ovi-body, system-ui, sans-serif);
}
.ovi-peek-head b { flex: 1 1 auto; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ovi-peek-x {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 24px; text-align: center;
  border: 1px solid rgba(128,128,128,.5); border-radius: 50%;
  background: transparent; color: inherit; font-size: 15px; cursor: pointer;
}
.ovi-peek-tile iframe {
  display: block; width: 100%; height: 70vh; border: 0;
  opacity: 0; transition: opacity .2s ease;      /* see strip(): no flash of the chrome */
}

/* Out of the way unless the dressing room is actually open and actually on screen, and
   even then the script pins them INSIDE the room's own edges.

   Robin: "The hanger and cart need to stay in the dressing room. Not follow everywhere."
   My first pass parked them at a fixed 46vh, which is the middle of the SCREEN, so once
   you scrolled past the room they were still sitting there over whatever came next. They
   are still fixed, because that is what makes them follow a finger rather than crawl up
   the page, but their top is recomputed against the room's rectangle so they can never
   leave it. `top` is deliberately absent here — the script owns it. */
#ovi-hanger, #ovi-cart {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .18s ease, transform .16s ease, background .16s ease;
}
body.ovi-dock-on #ovi-hanger, body.ovi-dock-on #ovi-cart {
  opacity: .96; pointer-events: auto; visibility: visible;
}

#ovi-room-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: .45; font-size: 13.5px; text-align: center; padding: 20px; pointer-events: none;
}
#ovi-room-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #ovi-room .ovi-tile, #ovi-hanger, #ovi-cart { transition: none !important; }
}