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

/* ==============================
   1. ATOMS: COMMON
   ============================== */
/* Exported from the "Common" part of Unity's Atoms.uss, section by section.
   Unity's NotchedButton is the web's <button>, except the shapes that fill themselves. */

/* generated:atoms:start */
/* ── Buttons ── */
button:where(:not(.circle-btn, .btn-pill, .nav-link)) {
  padding: var(--space-2) var(--space-4);
  background-color: var(--btn-bg);
  transition: scale var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  text-align: center;
  white-space: nowrap;
}

button:where(:not(.circle-btn, .btn-pill, .nav-link)):hover,
button:where(:not(.circle-btn, .btn-pill, .nav-link)):active {
  background-color: var(--btn-bg-hover);
}

button:where(:not(.circle-btn, .btn-pill, .nav-link)) > span {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

button:where(:not(.circle-btn, .btn-pill, .nav-link)) > span > .typing-indicator {
  margin-right: var(--space-2);
}

.btn-danger {
  --btn-bg: var(--danger);
}

.circle-btn {
  background-color: var(--btn-bg);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  flex-shrink: 0;
  align-self: center;
  width: var(--space-6);
  height: var(--space-6);
  font-size: var(--font-size-base);
  text-align: center;
  transition: background-color var(--transition-fast), color var(--transition-fast), scale var(--transition-fast);
  flex-direction: row;
}

.circle-btn:hover,
.circle-btn:active {
  background-color: var(--btn-bg-hover);
}

.circle-btn.circle-expanded {
  width: auto;
  min-width: 0;
  flex: 1;
  aspect-ratio: auto;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  display: flex;
  flex-direction: row;
}

.circle-btn.circle-expanded > * {
  margin-right: var(--space-2);
}

.btn-pill {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--accent-secondary);
  border-width: var(--border-width-thick);
  border-color: var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  flex-direction: row;
}

.btn-pill > * {
  margin-right: var(--space-2);
}

.btn-pill:hover {
  background-color: var(--accent-secondary-deep);
}

.btn-pill .badge {
  margin-left: auto;
  background-color: var(--accent);
  color: var(--accent-secondary);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  font-weight: var(--font-weight-bold);
}

.btn-voice.recording {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.btn-voice.recording:hover {
  background-color: var(--danger);
}

.btn-voice.recording.recording--ending {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--accent-secondary);
}


/* ── Fields ── */
.form-label {
  display: flex;
  color: var(--white-50);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  flex-direction: column;
}

.form-control {
  display: flex;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--accent-secondary-50);
  border-width: var(--border-width-base);
  border-color: var(--accent-50);
  color: var(--white);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.form-control:hover {
  border-color: var(--accent);
}

.form-control:focus {
  background-color: var(--white);
  border-color: var(--accent);
  color: var(--black);
}

.form-control:focus {
  caret-color: var(--black);
}

.form-control::selection {
  background-color: var(--accent-50);
}

.form-control::placeholder {
  color: var(--white-50);
}

.form-control.form-control--invalid {
  border-color: var(--danger);
}


/* ── Text ── */
.overline {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--accent-light);
}

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

.caption {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  white-space: normal;
}

.text-strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  white-space: normal;
}

.text-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

.text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

.underline-title {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-2);
  border-bottom-width: var(--border-width-thick);
  border-bottom-color: var(--accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--white);
}

.dialog-turn-count {
  display: flex;
  color: var(--accent);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 var(--space-1);
  transition: scale var(--transition-slow);
  flex-direction: column;
}

.dialog-emphasis {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
}

.message-timestamp {
  font-size: var(--font-size-xs);
  color: var(--white-50);
  margin-bottom: var(--space-1);
  padding: 0 var(--space-1);
}

.message-status {
  font-size: var(--font-size-xs);
  align-self: flex-end;
  margin-top: var(--space-1);
}

.message-status.sent {
  color: var(--white-50);
}

.message-status.read {
  color: var(--info);
}

.voice-text {
  color: var(--white-50);
}


/* ── Marks and badges ── */
.fas {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.fas--lg {
  font-size: var(--font-size-xl);
}

.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-circle);
  background-color: var(--accent-secondary-50);
  color: var(--white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-right: var(--space-2);
  flex-direction: row;
}

.new-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-5);
  height: var(--space-5);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  color: var(--accent-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
  flex-direction: row;
}

.new-badge--corner {
  position: absolute;
  top: 0;
  right: 0;
}

.emotion-tag {
  display: none;
  font-size: var(--font-size-xs);
  color: var(--white);
  background-color: var(--accent-50);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

.indicator-dot--unread {
  position: relative;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background-color: var(--accent);
}

.typing-indicator {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.typing-indicator > * {
  margin-right: var(--space-2);
}

.typing-indicator > span {
  width: var(--space-2);
  height: var(--space-2);
  background-color: var(--accent);
  border-radius: var(--radius-circle);
}

.voice-indicator {
  display: flex;
  align-items: center;
  margin-right: var(--space-2);
  color: var(--danger);
  flex-direction: row;
}


/* ── Surfaces and media ── */
.surface-card {
  background-color: var(--accent-secondary);
  border-width: var(--border-width-base);
  border-color: var(--accent-secondary-mid);
  border-radius: var(--radius-md);
}

.surface-card--raised {
  background-color: var(--accent-secondary-mid);
  border-width: 0;
}

.surface-card--deep {
  background-color: var(--accent-secondary-deep);
}

.surface-card--accent {
  border-width: var(--border-width-base);
  border-color: var(--accent);
}

.surface-card--pill {
  border-radius: var(--radius-pill);
}

.surface-card--sheet {
  border-width: 0;
  border-top-width: var(--border-width-base);
  border-top-color: var(--accent-50);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.avatar {
  display: flex;
  padding: 0;
  border-radius: var(--radius-circle);
  background-color: var(--accent-secondary-mid);
  background-size: cover;
  flex-shrink: 0;
  flex-direction: column;
}

.avatar--sm {
  width: var(--space-6);
  height: var(--space-6);
}

.avatar--lg {
  width: var(--space-7);
  height: var(--space-7);
}

.avatar--ring {
  border-width: var(--border-width-thick);
  border-color: var(--accent-light);
}

.picture {
  display: flex;
  border-radius: var(--radius-md);
  background-color: var(--accent-secondary-mid);
  background-size: cover;
  flex-direction: column;
}

.picture--missing {
  opacity: var(--disabled-opacity);
  filter: grayscale(1);
}

.progress-bar {
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--accent-secondary-mid);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0;
  background-color: var(--accent);
}

.sheet-handle {
  width: var(--space-6);
  height: var(--space-1);
  border-radius: var(--radius-sm);
  background-color: var(--white-50);
  align-self: center;
}

.scroll-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-7);
}
/* generated:atoms:end */


/* ==============================
   2. ATOMS: WEB ONLY
   ============================== */
/* Hand-written: what browsers need and Unity does itself. Same section names as
   the "Unity only" part of Unity's Atoms.uss; a section with no rules says what
   handles it instead. */

/* ── Buttons ── */
/* The browser's own button fill is switched off: each shape fills itself. */
:where(button) {
  background: transparent;
}

/* The notch is cut with clip-path. Unity: a tinted notch image. */
button:where(:not(.circle-btn, .btn-pill, .nav-link)) {
  --ch: var(--space-3);
  width: fit-content;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)));
}

/* The busy row is a <span>, which is not a flex box until told so. */
button:where(:not(.circle-btn, .btn-pill, .nav-link)) > span {
  display: inline-flex;
}

/* Secondary: no fill at rest. The outline is a frame: the notched shape with the
   same shape cut out of it, one border width in. Unity: drawn by NotchedButton.cs. */
.btn-secondary {
  --btn-bg: transparent;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --bw: var(--border-width-thick);
  --k: calc(var(--bw) * 0.414);
  background-color: var(--accent-50);
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 0,
    var(--bw) var(--bw), var(--bw) calc(100% - var(--ch) - var(--k)), calc(var(--ch) + var(--k)) calc(100% - var(--bw)),
    calc(100% - var(--bw)) calc(100% - var(--bw)), calc(100% - var(--bw)) var(--bw), var(--bw) var(--bw));
}

/* ── Fields ── */
/* The browser's own field border becomes a solid one. Unity: the field's inner
   element and the dropdown arrow colour. */
.form-control {
  border-style: solid;
}

/* ── Text ── */
/* A border needs a style in a browser. */
.underline-title {
  border-bottom-style: solid;
}

/* ── Marks and badges ── */
/* The typing dots sit inline with text and bounce one after another.
   Unity: built and stepped by TypingIndicator.cs. */
.typing-indicator {
  display: inline-flex;
}

.typing-indicator > span {
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator > span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator > span:nth-child(2) {
  animation-delay: -0.16s;
}

/* ── Surfaces and media ── */
/* A border needs a style in a browser. */
.surface-card,
.avatar--ring {
  border-style: solid;
}

/* The scroll fade is drawn with linear-gradient and lets clicks through.
   Unity: a tinted gradient image and picking-mode="Ignore". */
.scroll-fade {
  background: linear-gradient(to bottom, var(--accent-secondary), transparent);
  pointer-events: none;
}