/* Short case: one inbox for buying and selling. Shares the short-case layout
   of the product page case (../pdp/pdp.css). */
.proto[data-proto="inbox-app"] { --s: .82; }
.proto[data-proto="inbox-app"] .pair { gap: clamp(20px, 5vw, 64px); }
.short-case .hero .lede { margin-bottom: 26px; }

.ib-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fcfcfc; will-change: transform; }
.ib-scr[hidden] { display: none; }
.ib-scr img { display: block; width: 100%; height: auto; flex: none; }
.ib-tab { margin-top: auto; }

/* sections: each half of the screen, each with its own scroll (as built on pre-production) */
.ib-sec { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.ib-sec.shut { flex: 0 0 auto; }
.ib-sec.shut .ib-body { display: none; }
.ib-hdr { position: relative; display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.ib-hdr .closed, .ib-sec.shut .ib-hdr .open { display: none; }
.ib-sec.shut .ib-hdr .closed { display: block; }
.ib-body, .ib-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ib-body::-webkit-scrollbar, .ib-list::-webkit-scrollbar { display: none; }
.ib-body { box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,.12); }   /* the hint that more sits below */
.ib-list[hidden] { display: none; }

/* filters: the chip row is part of the header image; one image per active chip */
.ib-fhead { position: relative; flex: none; }
.ib-fhead img { display: none; }
.ib-fhead img.on { display: block; }
.ib-chip { position: absolute; top: 125px; height: 42px; border-radius: 21px; }

.ib-row { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; }
button.ib-row { cursor: pointer; }
.ib-back { position: absolute; left: 6px; top: 64px; width: 44px; height: 48px; }

/* working controls: a soft ring on the next step, a tint on hover */
.hot { border: 0; background: transparent; cursor: pointer; }
.ib-chip, .ib-back { position: absolute; z-index: 3; padding: 0; }
.hot:hover { background-color: rgba(255, 90, 31, .06); }
.hot.cue { box-shadow: inset 0 0 0 2px rgba(255, 90, 31, .55); animation: ib-cue 2.4s ease-in-out infinite; }
@keyframes ib-cue { 50% { box-shadow: inset 0 0 0 2px rgba(255, 90, 31, .12); } }
@media (prefers-reduced-motion: reduce) { .hot.cue { animation: none; } }