/*
 * The Catch-Up room's PrezzBox feed and story circles — PrezzFeed.js,
 * PrezzPost.js, PrezzFrame.js, PrezzReactions.js, PrezzStories.js.
 *
 * Everything here lives inside `.prezzbox` (catch-up.css), so --accent is
 * PrezzBox's red and the --pb-* names are its palette. A post is drawn the
 * way the social feeds it is modelled on draw one: edge to edge on a white
 * band, the account on top, the words, the charts, the reactions — with
 * the room's grey showing between posts rather than a card per post, so a
 * scroll of them reads as a feed and not as a stack of tiles.
 */

/* --- The feed ------------------------------------------------------------- */

.prezz-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The room's section title, as the Game Snapshot sets it. */
.prezz-feed__title {
  margin: 0;
  padding-inline: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.prezz-feed__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prezz-feed__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
}

.prezz-feed__foot:empty {
  display: none;
}

.prezz-feed__note {
  margin: 0;
  padding-block: var(--space-4);
  max-width: 32ch;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--pb-muted);
}

.prezz-feed__retry {
  min-height: var(--control-xs);
  padding: 0 var(--space-4);
  border: 1px solid var(--pb-border-strong);
  border-radius: var(--radius-full);
  background: var(--pb-surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* A post's shape while the first page is on its way: a head and a card. */
.prezz-feed__skeleton {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--pb-border);
  animation: prezz-pulse 1.4s var(--easing) infinite;
}

.prezz-feed__sentinel {
  height: 1px;
}

/* --- A post --------------------------------------------------------------- */

.prezz-post {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4) var(--space-2);
  background: var(--pb-surface);
  border-block: 1px solid var(--pb-border);
}

.prezz-post__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
}

/* The account's picture. On the red disc, the whistle is white: the brand's
   own app avatar (static/brand/avatar-red-*.png on PrezzBox). */
.prezz-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--pb-surface);
}

.prezz-avatar[data-mark] {
  background: var(--pb-red);
  color: var(--pb-surface);
}

.prezz-avatar__img {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
}

.prezz-post__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.prezz-post__line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.prezz-post__handle {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.prezz-post__verified {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
}

.prezz-post__time {
  font-size: var(--text-xs);
  color: var(--pb-muted);
  white-space: nowrap;
}

.prezz-post__subject {
  overflow: hidden;
  font-size: var(--text-xs);
  color: var(--pb-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prezz-post__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-4);
}

.prezz-post__headline {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

/* Folded to --caption-lines (PrezzPost.js) until "more" opens it. */
.prezz-post__caption {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--caption-lines, 3);
}

.prezz-post__caption[data-expanded="true"] {
  display: block;
  -webkit-line-clamp: unset;
}

.prezz-post__more {
  align-self: flex-start;
  padding: 0;
  color: var(--pb-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.prezz-post__single {
  padding-inline: var(--space-4);
}

/* The carousel's track leaves room for card shadows above and below; the
   frames cast none, so the post keeps its own rhythm instead. */
.prezz-post__media .carousel__track {
  padding-block: 0;
}

/* --- A chart (PrezzFrame.js) ---------------------------------------------- */

.prezz-frame {
  position: relative;
  aspect-ratio: var(--frame-aspect, 0.8);
  overflow: hidden;
  border: 1px solid var(--pb-border);
  border-radius: var(--radius-lg);
  background: var(--pb-surface);
  isolation: isolate;
}

.prezz-frame__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.prezz-frame[data-state="ready"] .prezz-frame__frame {
  opacity: 1;
}

/* The room's grey with the whistle, until PrezzBox has drawn. */
.prezz-frame__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--pb-bg);
  color: var(--pb-border-strong);
  transition: opacity var(--duration) var(--easing);
}

.prezz-frame[data-state="loading"] .prezz-frame__veil .prezzbox-mark {
  animation: prezz-pulse 1.4s var(--easing) infinite;
}

.prezz-frame[data-state="ready"] .prezz-frame__veil {
  opacity: 0;
  pointer-events: none;
}

/* A frame that never said it drew: the veil stays as the card's picture,
   and the iframe behind it (a refusal, an error page) is never shown. */
.prezz-frame[data-state="silent"] .prezz-frame__frame {
  visibility: hidden;
}

/* The whole card is the tap: the iframe under it takes none. */
.prezz-frame__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  border: 0;
  border-radius: inherit;
}

.prezz-frame__hit:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* --- Actions -------------------------------------------------------------- */

.prezz-post__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2) var(--space-4);
}

.prezz-post__action {
  display: grid;
  place-items: center;
  width: var(--tap-floor);
  height: var(--tap-floor);
  border-radius: var(--radius-full);
  color: var(--text);
}

.prezz-post__full {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-xs);
  margin-left: auto;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* --- Reactions (PrezzReactions.js) ----------------------------------------- */

.prezz-react {
  position: relative;
  display: flex;
  align-items: center;
}

.prezz-react__button {
  display: grid;
  place-items: center;
  width: var(--tap-floor);
  height: var(--tap-floor);
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: var(--text-xl);
  line-height: var(--leading-none);
}

/* A reaction given lands with a small pop — the glyph, not the button. */
.prezz-react__button[aria-pressed="true"] .prezz-react__glyph {
  animation: prezz-pop var(--spring-duration) var(--spring);
}

.prezz-react__glyph {
  display: grid;
  place-items: center;
}

.prezz-react__tally {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-right: var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.prezz-react__tally[hidden] {
  display: none;
}

.prezz-react__cluster {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-tight);
}

/* The seven, in a pill over the heart. */
.prezz-react__picker {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  left: 0;
  z-index: 5;
  display: flex;
  gap: var(--space-05);
  padding: var(--space-1);
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-floating);
  transform-origin: left bottom;
  animation: prezz-picker-in var(--spring-duration) var(--spring);
}

.prezz-react__picker[hidden] {
  display: none;
}

.prezz-react__option {
  --press-scale: 1.2;
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  line-height: var(--leading-none);
}

.prezz-react__option[aria-pressed="true"] {
  background: var(--accent-soft);
}

/* --- Story circles (PrezzStories.js) -------------------------------------- */

.prezz-stories[hidden] {
  display: none;
}

/* --- Motion --------------------------------------------------------------- */

@keyframes prezz-pulse {
  50% {
    opacity: 0.45;
  }
}

@keyframes prezz-pop {
  40% {
    transform: scale(1.3);
  }
}

@keyframes prezz-picker-in {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(var(--space-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .prezz-feed__skeleton,
  .prezz-frame[data-state="loading"] .prezz-frame__veil .prezzbox-mark,
  .prezz-react__button[aria-pressed="true"] .prezz-react__glyph,
  .prezz-react__picker {
    animation: none;
  }
}