/* ==============================
   PAGES — the player's pages, loaded after organisms.css. Unity is the
   source of truth: part 1 is exported from the "Common" part of Unity's
   Assets/Shared/UI/Pages/Pages.uss, same class names, same sections, same order
   (WEB_EXPORT.md run 6). Part 2 is hand-written.
   ============================== */

/* ==============================
   1. PAGES: COMMON
   ============================== */
/* Exported from the "Common" part of Unity's Pages.uss, section by section. */

/* generated:pages:start */
/* ── Chat page ── */
.chat-container {
  background-color: var(--accent-secondary);
  font-size: var(--font-size-sm);
}

.chat-header {
  background-color: var(--accent-secondary-mid);
  padding: var(--space-4);
  position: relative;
}

.chat-body-wrapper {
  background-color: var(--accent-secondary);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  padding: var(--space-4);
}

.chat-bg {
  display: none;
  background-size: cover;
  background-position: center;
}

.chat-reset {
  align-self: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}


/* ── Error page ── */
.error-page {
  align-items: center;
  justify-content: center;
  padding: 0 10%;
  background-color: var(--black-85);
  text-align: center;
}

.error-page > * {
  margin-bottom: var(--space-4);
}


/* ── Frame ── */
.ui-frame {
  flex-direction: column;
}

.bar-top,
.bar-bottom {
  min-height: 10%;
  flex-shrink: 0;
}

.bar-content,
.frame-content {
  flex-grow: 1;
}

.frame-middle {
  flex-grow: 1;
  flex-direction: row;
}

.bar-left,
.bar-right {
  width: 10%;
  min-width: var(--space-7);
  max-width: var(--space-7);
  flex-shrink: 0;
  overflow: hidden;
}

.bar-top__bg {
  background-color: var(--accent-secondary-mid);
}


/* ── Story page ── */
/* generated:pages:end */


/* ==============================
   2. PAGES: WEB ONLY
   ============================== */
/* Hand-written: what browsers need and Unity does itself. Same section names as
   the "Unity only" part of Unity's Pages.uss; a section with no rules says so. */
/* ── Chat page ── */
/* The page is a flex column and its message list scrolls. Unity: every element is a flex column; a ScrollView. */
.chat-container {
  display: flex;
  flex-direction: column;
}

.chat-messages {
  overflow-y: auto;
}

/* During the reward sequence the list dims and lifts, and a lost chat turns grey. Unity has neither. */
.chat-messages.reward-dimmed {
  opacity: var(--disabled-opacity);
  transform: translateY(calc(var(--space-6) * -1));
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  pointer-events: none;
}

.chat-messages.reward-dimmed-slow {
  opacity: var(--disabled-opacity);
  transform: translateY(calc(var(--space-4) * -1));
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  pointer-events: none;
}

.reward-desaturate {
  filter: grayscale(1);
  transition: filter var(--transition-slow);
}

/* The empty chat's placeholder and the report buttons in the header's corner. Unity has neither. */
.chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--black-50);
  animation: fadeIn var(--transition-slow);
}

.chat-placeholder-icon {
  font-size: var(--font-size-display);
  margin-bottom: var(--space-4);
}

.chat-placeholder-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.report-btn-group {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-2);
  z-index: 1;
}

/* ── Error page ── */
/* A flex column. Unity: every element already is one. */
.error-page {
  display: flex;
  flex-direction: column;
}

/* ── Frame ── */
/* The frame is the 9:16 page in the window, padded by the device's safe areas. Unity: the panel and SafeAreaInset.cs.
   A document holds several frames and its script shows one, with .hidden. */
.ui-frame {
  display: flex;
  height: var(--app-height, 100dvh);
  aspect-ratio: 9 / 16;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.ui-frame.hidden {
  display: none;
}

/* A region is a flex column that anchors its layers. Unity: every element already does both. */
.bar-top,
.bar-bottom,
.bar-left,
.bar-right,
.frame-content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.frame-middle {
  display: flex;
  min-height: 0;
}

.frame-content {
  min-width: 0;
  min-height: 0;
}

/* A bar's content sits above its background layer. Unity: its order in the hierarchy. */
.bar-content {
  position: relative;
}

/* The bottom bar goes when the ended chat hides its input. Unity: an empty bar collapses (SceneUIPopulator). */
.bar-bottom:has(.chat-disabled) {
  display: none;
}

/* ── Story page ── */
/* No rules: Unity's only rule here is its editor-only beat counter. */