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

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

/* generated:molecules:start */
/* ── Tabs ── */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0;
  flex-direction: row;
}

.nav-tabs {
  border-bottom-width: var(--border-width-base);
  border-bottom-color: var(--accent-secondary-50);
}

.nav-tabs .nav-link {
  color: var(--white-50);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  transition: all var(--transition-normal);
}

.nav-tabs .nav-link:hover {
  color: var(--white);
  background-color: var(--accent-secondary-50);
}

.nav-tabs .nav-link.active {
  color: var(--white);
  background-color: var(--accent-secondary-50);
  border-bottom-width: var(--border-width-thick);
  border-bottom-color: var(--accent);
}


/* ── Panel ── */
.glass-panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-3);
  background-color: var(--accent-secondary-50);
}


/* ── Dialog card ── */
.dialog-card {
  background-color: var(--accent-secondary);
  padding: var(--space-5);
  max-width: var(--space-9);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.dialog-card > * {
  margin-bottom: var(--space-3);
}

.dialog-title,
.dialog-body {
  margin: 0;
}


/* ── Messages ── */
.message {
  display: flex;
  margin-bottom: var(--space-2);
  align-items: flex-start;
  flex-direction: row;
  transition: opacity var(--transition-slow), translate var(--transition-slow);
}

.message.user {
  justify-content: flex-end;
}

.message-content-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  position: relative;
}

.message.user .message-content-wrapper {
  align-items: flex-end;
}

.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--accent-secondary-50);
  color: var(--white);
  transition: scale var(--transition-slow);
}

.message.user .message-bubble {
  background-color: var(--accent);
  border-bottom-right-radius: 0;
}

.message.ai .message-bubble {
  background-color: var(--accent-secondary-mid);
  border-top-left-radius: 0;
}

.message-avatar-spacer {
  --avatar-size: var(--space-6);
  width: var(--avatar-size);
  min-width: var(--avatar-size);
  margin-right: var(--space-2);
}

.message-avatar {
  --avatar-size: var(--space-6);
  width: var(--avatar-size);
  min-width: var(--avatar-size);
  margin-right: var(--space-2);
  height: var(--avatar-size);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  background-color: var(--accent);
  color: var(--white);
  overflow: hidden;
  flex-direction: row;
  background-size: cover;
}

.message.system-message {
  justify-content: center;
  margin: var(--space-4) 0;
}

.system-message-content {
  background-color: var(--accent-secondary-50);
  border-width: var(--border-width-base);
  border-color: var(--accent-secondary-50);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
}

.system-message-content > * {
  margin-right: var(--space-3);
}

.message .message-bubble.message-emote,
.message .message-bubble.message-sticker {
  background-color: initial;
  padding: 0;
}

.message-emote {
  font-size: var(--font-size-display);
}

.message-sticker-img {
  max-width: var(--space-8);
  max-height: var(--space-8);
  display: none;
  width: var(--space-8);
  height: var(--space-8);
  background-size: contain;
}

.message-bubble__text {
  white-space: normal;
}

.message-sticker .message-sticker-img {
  display: flex;
}

.message-sticker .message-bubble__text {
  display: none;
}


/* ── Toast ── */
.toast {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  max-width: var(--space-9);
  color: var(--white);
  flex-direction: row;
}

.toast-body {
  flex: 1;
  white-space: normal;
}

.toast-close {
  margin-left: var(--space-3);
}

.toast--success {
  background-color: var(--success);
}

.toast--error {
  background-color: var(--danger);
}

.toast--warning {
  background-color: var(--warning);
  color: var(--black);
}

.toast--info {
  background-color: var(--info);
}

.toast--updating {
  background-color: var(--info);
  opacity: var(--disabled-opacity);
}


/* ── Stat card ── */
.stat-card {
  flex: 1;
  max-width: 50%;
  height: var(--space-7);
  padding-top: var(--space-1);
  background-color: var(--accent-secondary);
  border-width: var(--border-width-base);
  border-color: var(--white-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-slow);
}

.stat-label,
.stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  flex-direction: row;
  font-weight: var(--font-weight-bold);
}

.stat-label {
  letter-spacing: 0;
  color: var(--white-50);
  white-space: nowrap;
  padding: var(--space-1);
  flex-grow: 1;
  font-size: var(--font-size-xs);
}

.stat-value {
  flex-grow: 2;
  font-size: var(--font-size-base);
  text-align: center;
  transition: color var(--transition-slow), scale var(--transition-slow);
}

.stat-label__icon {
  margin-right: var(--space-1);
}


/* ── Library item ── */
.cc-library-item {
  position: relative;
  overflow: hidden;
  border-width: var(--border-width-thick);
  border-color: transparent;
  transition: all var(--transition-normal);
  aspect-ratio: 0.5625;
  border-radius: var(--radius-sm);
}

.cc-library-item:hover {
  border-color: var(--accent-50);
}

.cc-library-item.selected {
  border-color: var(--accent);
}

.cc-library-item--square {
  aspect-ratio: 1;
}


/* ── Reward ── */
.reward-dismiss-hint {
  margin-top: var(--space-5);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.reward-dismiss-hint.reward-dismiss-hint--in {
  opacity: 1;
}

.reward-image-frame .reward-dismiss-hint {
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  color: var(--white);
}

.reward-image-container {
  position: relative;
  opacity: 0;
  scale: var(--active-scale);
  transition: opacity var(--transition-slow), scale var(--transition-slow);
}

.reward-image-frame {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border-width: var(--border-width-thick);
  border-color: var(--accent-50);
  overflow: hidden;
  background-color: var(--black-40);
}

.reward-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-size: contain;
  height: var(--space-9);
}

.reward-fallback-card {
  padding: var(--space-6);
  text-align: center;
  min-width: var(--space-9);
}

.reward-fallback-card__title {
  margin: 0;
  white-space: normal;
  text-align: center;
}

.reward-fallback-card.win .reward-fallback-card__title {
  color: var(--accent);
}

.reward-fallback-card.lose .reward-fallback-card__title {
  color: var(--neutral);
}

.reward-image-container.reward-reveal {
  opacity: 1;
  scale: 1 1;
}


/* ── HUD stat ── */
.stat {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  justify-content: center;
  align-items: center;
}

.row > .stat {
  height: 80%;
}

.col > .stat {
  width: 80%;
  margin-top: var(--space-4);
}

.stat-hearts {
  background-color: var(--stat-hearts);
}

.stat-stamina {
  background-color: var(--stat-stamina);
}

.stat-gold {
  background-color: var(--stat-gold);
}


/* ── Chapter card ── */
.chapter-card {
  width: var(--space-9);
  margin: var(--space-2);
  padding: var(--space-2);
  background-color: var(--accent-secondary-50);
  border-radius: var(--radius-md);
  align-items: center;
}

.chapter-card__thumb {
  width: 100%;
  height: var(--space-8);
  border-radius: var(--radius-sm);
  background-color: var(--black-50);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chapter-card__title {
  margin-top: var(--space-2);
}

.chapter-card__badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  color: var(--success);
  font-size: var(--font-size-lg);
  display: none;
}

.chapter-card--completed .chapter-card__badge {
  display: flex;
}


/* ── Chat input ── */
.chat-input-group {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  width: 90%;
}

.chat-input-group > * {
  margin-right: var(--space-2);
}

.input-group-custom {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
}

.message-input {
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  text-align: left;
}

.message-input--warning {
  background-color: var(--warning-50);
}

.message-input::placeholder {
  text-align: center;
}


/* ── Scripted options ── */
.script-options {
  flex-direction: row;
  display: none;
  width: 90%;
}

.script-options > * {
  margin-right: var(--space-2);
}

.script-option {
  flex: 1;
  width: auto;
  min-width: 0;
  white-space: normal;
}

.script-option-emote {
  font-size: var(--font-size-xl);
}

.script-option-sticker {
  max-height: var(--space-7);
  max-width: 100%;
  display: none;
  align-self: center;
  width: var(--space-7);
  height: var(--space-7);
  background-size: contain;
}


/* ── Story state and objective ── */
.story-state-text {
  display: none;
  background-color: var(--accent-secondary);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  white-space: normal;
}

.story-objective {
  display: none;
  background-color: var(--accent-secondary-mid);
  color: var(--white);
  font-size: var(--font-size-lg);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  flex-direction: row;
  align-items: center;
}

.story-objective-label {
  letter-spacing: 0;
  margin-right: var(--space-2);
}

.story-objective-text {
  flex-grow: 1;
  white-space: normal;
}
/* generated:molecules:end */


/* ==============================
   2. MOLECULES: WEB ONLY
   ============================== */
/* Hand-written: what browsers need and Unity does itself. Same section names as
   the "Unity only" part of Unity's Molecules.uss; a section with no rules says so. */
/* ── Tabs ── */
/* The tab list is a <ul>; a border needs a style in a browser. */
.nav {
  list-style: none;
}

.nav-tabs {
  border-bottom-style: solid;
}

.nav-tabs .nav-link {
  cursor: pointer;
}

/* ── Panel ── */
/* No rules: the section is all common. */

/* ── Dialog card ── */
/* No rules: the section is all common. */

/* ── Messages ── */
/* A long word wraps inside its bubble; pictures are <img>, fitted with object-fit. */
.message-bubble {
  overflow-wrap: anywhere;
}

/* A new message fades in and a waiting bubble pulses. Unity: FadeIn and ClassPulse, from C#. */
.message {
  animation: fadeIn var(--transition-slow);
}

.message-bubble.message-pulse {
  animation: message-pulse var(--transition-slow) infinite;
}

.system-message-content {
  border-style: solid;
}

.message-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-sticker-img {
  object-fit: contain;
}

/* Media a topic sends into the chat. Unity has none. */
.uploaded-media-chat-img,
.uploaded-media-chat-video {
  max-width: 100%;
  max-height: var(--space-9);
  object-fit: contain;
}

.uploaded-media-chat-audio {
  width: 100%;
  min-width: var(--space-9);
  max-width: var(--space-9);
  height: var(--space-6);
  margin-top: var(--space-2);
}

/* ── Toast ── */
/* No rules: the section is all common. */

/* ── Stat card ── */
.stat-card {
  border-style: solid;
}

/* A changed value pops and its card glows. Unity: ClassPulse, from C#. */
.stat-card.card-glow {
  animation: card-glow var(--transition-slow);
}

.stat-pop {
  animation: stat-pop var(--transition-slow);
}

/* ── Library item ── */
.cc-library-item {
  border-style: solid;
}

/* ── Reward ── */
.reward-image-frame {
  border-style: solid;
}

/* The picture is an <img>. The text-only card fades in, and a glow sits behind the picture; Unity has neither. */
.reward-image {
  object-fit: contain;
}

.reward-image-container.reward-fade-in {
  animation: rewardFadeIn var(--transition-slow) forwards;
}

.reward-glow {
  position: absolute;
  inset: calc(var(--space-6) * -1);
  border-radius: var(--radius-circle);
  background: var(--accent-50);
  z-index: calc(var(--z-overlay) * -1);
  animation: rewardGlow var(--transition-slow) infinite alternate;
}

/* ── HUD stat ── */
/* A chip is a flex column. Unity: every element already is one. */
.stat {
  display: flex;
  flex-direction: column;
}

/* ── Chapter card ── */
/* A flex column that anchors its badge. Unity: every element already does both. */
.chapter-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Chat input ── */
/* The message field is a <textarea>, which a browser lets the user resize. */
.message-input {
  resize: none;
}

/* ── Scripted options ── */
/* The panel shows when its hidden attribute is removed, and a sticker option is an <img> built only when needed.
   Unity: ChatController sets both displays. */
.script-options:not([hidden]) {
  display: flex;
}

.script-option-sticker {
  display: block;
  object-fit: contain;
}

/* ── Story state and objective ── */
/* No rules: the section is all common. */