/* Telegram's grouped-list look (as in BotFather's Mini App): section cards on the page colour,
   headers outside the cards, hint footers under them. Colours come only from Telegram's theme
   variables, apart from the network colours behind a missing asset logo and the QR code's white. */

:root {
  --page: var(--tg-theme-secondary-bg-color, #efeff4);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --text: var(--tg-theme-text-color, #000000);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --accent: var(--tg-theme-accent-text-color, var(--tg-theme-link-color, #2481cc));
  --link: var(--tg-theme-link-color, var(--accent));
  --danger: var(--tg-theme-destructive-text-color, #e53935);
  --separator: var(--tg-theme-section-separator-color, var(--page));
  --press: rgba(127, 127, 127, 0.12);
  --press: color-mix(in srgb, var(--text) 7%, transparent);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding:
    calc(8px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--link);
  text-decoration: none;
}

h1,
h2,
p {
  margin: 0;
}

.mono,
code {
  font-family: var(--mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- icons */

.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- hero */

.page.centered {
  padding-top: 12vh;
}

.hero {
  padding: 16px 12px 4px;
  text-align: center;
}

.hero-avatar {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
}

.hero-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  color: var(--accent);
  stroke-width: 1.4;
}

.hero-icon.danger {
  color: var(--danger);
}

.hero h1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.hero .hero-amounts {
  font-size: 20px;
}

.hero-subtitle,
.hero-text {
  max-width: 340px;
  margin: 6px auto 0;
  color: var(--hint);
  font-size: 14px;
  line-height: 1.4;
}

.hero-text {
  margin-top: 0;
  color: var(--text);
  font-size: 15px;
}

.hero-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--hint);
}

.hero-pair .icon {
  width: 22px;
  height: 22px;
}

.hero-status {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- sections */

.group {
  margin-top: 24px;
}

.hero + .group {
  margin-top: 20px;
}

.group-title {
  margin: 0 0 8px;
  padding: 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.card {
  overflow: hidden;
  border-radius: 12px;
  background: var(--card);
}

.card + .card,
.card + .footer + .card {
  margin-top: 12px;
}

.footer {
  margin-top: 8px;
  padding: 0 16px;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.4;
}

.footer + .footer {
  margin-top: 6px;
}

.footer:empty {
  display: none;
}

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

/* ---------------------------------------------------------------- rows */

.row {
  --inset: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  text-align: start;
  text-decoration: none;
}

.row.has-icon {
  --inset: 56px;
}

.row.has-avatar {
  --inset: 64px;
  gap: 12px;
}

.row.has-pair {
  --inset: 70px;
  gap: 12px;
}

.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--inset);
  height: 1px;
  background: var(--separator);
}

button.row,
a.row,
summary.row,
.row[role="button"],
.picker {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

button.row:active,
a.row:active,
summary.row:active,
.row[role="button"]:active,
.picker:active {
  background: var(--press);
}

@media (hover: hover) {
  button.row:hover,
  a.row:hover,
  summary.row:hover,
  .row[role="button"]:hover,
  .picker:hover {
    background: var(--press);
  }
}

.row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.row-title {
  overflow-wrap: anywhere;
}

.row-subtitle {
  overflow: hidden;
  color: var(--hint);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-subtitle:empty {
  display: none;
}

.chevron {
  width: 20px;
  height: 20px;
  margin-inline-end: -4px;
  color: var(--hint);
  stroke-width: 2;
}

.row.accent {
  color: var(--accent);
}

.trail-icon {
  color: var(--accent);
}

/* label/value rows */

.row.pair {
  justify-content: space-between;
}

.row.pair .row-label {
  flex: none;
  max-width: 55%;
}

.row-value {
  min-width: 0;
  text-align: end;
  color: var(--hint);
  overflow-wrap: anywhere;
}

.row-value.strong {
  color: var(--text);
  font-weight: 600;
}

.row.stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.row.stacked .row-label,
.copy-row .row-label {
  color: var(--hint);
  font-size: 13px;
}

.row.stacked .row-value {
  color: var(--text);
  text-align: start;
}

.asset-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

/* ---------------------------------------------------------------- avatars */

.avatar {
  --size: 36px;
  --badge: 16px;
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
}

.avatar.tiny {
  --size: 22px;
  --badge: 10px;
}

.avatar.small {
  --size: 30px;
  --badge: 13px;
}

.avatar.large {
  --size: 56px;
  --badge: 22px;
}

.avatar:empty {
  background: color-mix(in srgb, var(--hint) 22%, transparent);
}

/* A hairline ring keeps white logos (ETH) round on white cards. */
.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  pointer-events: none;
}

.avatar:empty::after {
  content: none;
}

.avatar-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-badge {
  position: absolute;
  z-index: 1;
  right: -2px;
  bottom: -2px;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 2px var(--card);
}

.hero .avatar-badge {
  background: var(--page);
  box-shadow: 0 0 0 2px var(--page);
}

.avatar.fallback {
  background: var(--hint);
}

.avatar-ticker {
  color: #ffffff;
  font-size: calc(var(--size) * 0.33);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.avatar-ticker[data-length="4"] {
  font-size: calc(var(--size) * 0.28);
}

.avatar-ticker[data-length="5"] {
  font-size: calc(var(--size) * 0.23);
}

.avatar.fallback[data-network="Bitcoin"] { background: #f7931a; }
.avatar.fallback[data-network="Ethereum"] { background: #627eea; }
.avatar.fallback[data-network="Arbitrum"] { background: #28a0f0; }
.avatar.fallback[data-network="Solana"] { background: #9945ff; }
.avatar.fallback[data-network="Assethub"] { background: #e6007a; }
.avatar.fallback[data-network="Tron"] { background: #ff060a; }

/* My swaps: the from and to avatars overlap; the first one's badge sits at its left. */
.avatar-pair {
  display: flex;
  flex: none;
}

.avatar-pair .avatar + .avatar {
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--card);
}

.avatar-pair .avatar:first-child .avatar-badge {
  right: auto;
  left: -2px;
}

/* ---------------------------------------------------------------- form */

.picker {
  position: relative;
}

.picker select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
}

.picker .row-title {
  font-weight: 500;
}

.row-title.placeholder {
  color: var(--hint);
  font-weight: 400;
}

.row.amount {
  min-height: 56px;
  padding-block: 6px;
}

.row.amount input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.row.amount input::placeholder {
  color: var(--hint);
  font-weight: 400;
}

.amount-ticker {
  color: var(--hint);
  font-size: 17px;
  font-weight: 500;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}

.chips:empty {
  display: none;
}

.chip {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 15px;
  background: var(--page);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.chip:active {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.switch-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.switch-wrap + .group {
  margin-top: 2px;
}

.switch {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
}

.switch:active {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.row.quote {
  font-size: 17px;
  font-weight: 600;
}

.row.quote:empty {
  display: none;
}

.row.quote[data-state="pending"] {
  color: var(--hint);
  font-size: 15px;
  font-weight: 400;
}

.row.quote[data-state="error"] {
  color: var(--danger);
  font-size: 15px;
  font-weight: 400;
}

.address-input textarea {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: none;
  background: transparent;
  line-height: 20px;
  resize: none;
  overflow-wrap: anywhere;
}

.address-input textarea:not(:placeholder-shown) {
  font-family: var(--mono);
  font-size: 14px;
}

.address-input textarea::placeholder {
  color: var(--hint);
}

.row.recent .icon {
  color: var(--hint);
}

.row.recent .row-title {
  font-family: var(--mono);
  font-size: 14px;
}

/* ---------------------------------------------------------------- disclaimer */

.disclosure summary {
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure .chevron {
  transition: transform 0.2s ease;
}

.disclosure[open] .chevron {
  transform: rotate(90deg);
}

.rich {
  margin-left: 16px;
  padding: 12px 16px 16px 0;
  border-top: 1px solid var(--separator);
  color: var(--hint);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rich b {
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------- callouts and status */

.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  line-height: 1.4;
}

.callout .icon {
  color: var(--danger);
}

.callout p {
  flex: 1;
  padding-top: 2px;
}

.callout.prominent p {
  font-size: 16px;
  font-weight: 600;
}

.callout.muted .icon,
.callout.muted p {
  color: var(--hint);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
}

.status .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.status[data-tone="progress"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.status[data-tone="muted"] {
  background: color-mix(in srgb, var(--hint) 16%, transparent);
  color: var(--hint);
}

.status[data-tone="danger"] {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

/* My swaps: date at the left, progress at the right of the subtitle line. */
.row-subtitle.split {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.row-date {
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-status {
  flex: none;
  max-width: 50%;
  overflow: hidden;
  color: var(--hint);
  font-weight: 500;
  text-overflow: ellipsis;
}

.row-status[data-tone="progress"] {
  color: var(--accent);
}

.row-status[data-tone="done"] {
  color: var(--text);
}

.row-status[data-tone="danger"] {
  color: var(--danger);
}

.row.swap .row-title {
  font-weight: 600;
}

.row.swap .row-body {
  gap: 3px;
}

/* ---------------------------------------------------------------- deposit */

.qr-card {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* A QR code needs a light quiet zone in both themes. */
.qr-frame {
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  line-height: 0;
}

.qr {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
}

.qr:not([src]) {
  visibility: hidden;
}

.copy-row .row-value {
  color: var(--text);
  text-align: start;
}

.copy-row code {
  user-select: text;
  -webkit-user-select: text;
}

/* ---------------------------------------------------------------- loading and toast */

.loading {
  padding-top: 35vh;
  color: var(--hint);
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 10;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  background: color-mix(in srgb, var(--text) 88%, transparent);
  color: var(--card);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}