/* ================================================================ states */

/* New Profile Page Styles */
.prof-new {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.prof-body-new {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 20px);
}

/* The Magic Eden shelf header: avatar and name side by side, badges under the
   name, and the bio slot below the whole row. The bio holds account facts —
   the wallet proof, checkable on the ledger — because there is no bio field
   in any of this app's data, and a made-up one would be the first invented
   line on a page this app keeps honest. */
.meprof-head {
  padding-top: 18px;
}
.meprof-id {
  display: flex;
  align-items: center;
  gap: 16px;
}
.meprof-meta {
  flex: 1;
  min-width: 0;
}
.meprof-name {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--label);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meprof-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--label-2);
}
.meprof-bio {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--label-2);
}
.meprof-bio > div + div {
  margin-top: 8px;
}

.prof-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.prof-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.prof-badge svg {
  width: 12px;
  height: 12px;
}

.prof-badge-verified {
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent);
}

.prof-badge-wallet {
  background: rgba(52, 199, 89, 0.1);
  color: var(--success);
}

/* The tagline that used to sit under the badges was copy, not fact, and it is
   gone; the bio slot above takes its place with the wallet proof instead. */

/* Says out loud why a signed-in session is still showing an address. Hidden
   until Pi has actually answered, so it never pre-empts a name that was on its
   way. */
.prof-name-note {
  font-size: 12px;
  line-height: 1.35;
  color: var(--label-2);
  margin-top: 4px;
}

.prof-wallet-section {
  background: var(--fill);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
}

.prof-wallet-label {
  font-size: 12px;
  color: var(--label-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.prof-wallet-address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The empty case: no address, so no copy button, because there is nothing on
   the clipboard that is anybody's. Same box and same radius as the real one, so
   the card does not change size or shape between the two states — a card that
   shrinks when it has nothing to say is how an empty state ends up looking
   like a mistake. */
.prof-wallet-none-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--label-2);
  letter-spacing: -0.01em;
}

.prof-icon-btn {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 0.5px solid var(--separator);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

.prof-icon-btn svg {
  width: 18px;
  height: 18px;
  color: var(--label);
}

.prof-icon-btn:active {
  transform: scale(0.92);
  background: var(--fill-2);
}

/* ME stat strip: Total Items / Active On, the two headline numbers. */
.meprof-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.meprof-stat {
  min-width: 0;
  padding: 12px 14px;
  background: var(--card);
  border: 0.5px solid var(--separator);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.meprof-stat-value {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meprof-stat-label {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meprof-chains {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 27px;
}
/* The Active On chip. The dot is green only when this wallet has a real
   footprint (owns, mints, lists or trades); a gray dot claims nothing. */
.chainchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  border: 0.5px solid var(--separator);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--label);
}
.chainchip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}
.chainchip.off .dot {
  background: var(--label-3);
}
.chainchip.off {
  color: var(--label-2);
}

/* ME tab bar: labels with counts and an underline on the active tab. */
.meprof-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  border-bottom: 0.5px solid var(--separator);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.meprof-tabs::-webkit-scrollbar {
  display: none;
}
.meprof-tabs button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 13px 11px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  font-size: 14px;
  font-weight: 650;
  color: var(--label-2);
  cursor: pointer;
  transition: color 0.15s;
}
.meprof-tabs button em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--label-3);
}
.meprof-tabs button.active {
  color: var(--label);
  border-bottom-color: var(--accent);
}
.meprof-tabs button.active em {
  background: var(--accent-soft);
  color: var(--accent);
}
.meprof-tabs button:active {
  opacity: 0.6;
}

/* The sort and status bar under the tabs. */
.meprof-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.meprof-sort {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-width: 0;
}
.meprof-sort::-webkit-scrollbar {
  display: none;
}
.meprof-status {
  display: flex;
  gap: 6px;
  flex: none;
}
.tchip {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  border: 0.5px solid var(--separator);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--label-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tchip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tchip:active {
  transform: scale(0.96);
}

/* One-line provenance under the bar or a tab's grid: where the numbers came
   from. (The header's name column is `.meprof-meta` — a different thing.) */
.meprof-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--label-3);
}

/* The Account settings page's ME-style tab bar (the page is a pushed overlay,
   not a sheet): two real tabs (Profile, Wallets) with an underline bar snapped
   under the active one. "Marketplace" and "2FA
   Settings" are on the reference page and are not drawn: this app has no such
   settings, and a tab that can only sit empty is not a tab — the same rule
   that kept "Showcase" off the profile. */
.mestt-tabs {
  display: flex;
  gap: 28px;
  margin-top: 4px;
  border-bottom: 1px solid var(--separator);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mestt-tabs::-webkit-scrollbar {
  display: none;
}
.mestt-tab {
  position: relative;
  flex: none;
  padding: 10px 2px 12px;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--label-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.mestt-tab.active {
  color: var(--label);
}
.mestt-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  width: 26px;
  border-radius: 9999px;
  background: var(--accent);
}
.mestt-panel[hidden] {
  display: none;
}
.mestt-panel > .prof-section:first-child {
  margin-top: 10px;
}
/* The one-line note at the top of a settings-page tab: what the tab is, in fact. */
.mestt-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--label-3);
}

/* The page itself: the overlay's scroll body has no padding of its own (the
   token and collection pages bring theirs), and the heading is the reference's
   "Account Settings" title, styled like the sheet's h3 with the sub beneath. */
.mestt-page {
  padding: 16px 20px 44px;
}
.mestt-page h3 {
  margin: 2px 0 4px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.mestt-page .mestt-sub {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--label-2);
}

.prof-section {
  margin-top: 20px;
}

/* The old section titles were how the four segments restated their labels;
   the ME tab bar carries the labels now, so the titles are gone. */