/* Public profile surface fix.
   This applies to the profile opened after tapping an author in the feed.
   The colored profile header stays visible; profile actions and editing remain enabled. */

.content > .view.profile-view--public {
  min-width: 0;
  background: transparent !important;
}

.content > .view.profile-view--public > .profile-card {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Remove only the gray card surface around the profile details. */
.content > .view.profile-view--public > .profile-card > *:not(.profile-banner),
.content > .view.profile-view--public > .profile-card .profile-top,
.content > .view.profile-view--public > .profile-card .profile-identity,
.content > .view.profile-view--public > .profile-card .profile-bio,
.content > .view.profile-view--public > .profile-card .profile-stats,
.content > .view.profile-view--public > .profile-card .spark-card,
.content > .view.profile-view--public > .profile-card .profile-actions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.content > .view.profile-view--public > .profile-card > .profile-actions {
  border-color: transparent !important;
}

.content > .view.profile-view--public > .back-link {
  margin-top: 4px;
}

/* Restore the visible colored header after the transparent surface rules.
   The gray feed header is removed separately; this banner must keep its image. */
.content > .view.profile-view--public > .profile-card > .profile-banner {
  display: block !important;
  min-height: 148px !important;
  background-color: #211638 !important;
  background-image: linear-gradient(135deg, #0d0b14, #39205d 58%, #9064d7) !important;
}

.content > .view.profile-view--public > .profile-card > .profile-banner.profile-banner--neon {
  background-image: linear-gradient(120deg, #071d2a, #075d70 45%, #ee3d86) !important;
}
.content > .view.profile-view--public > .profile-card > .profile-banner.profile-banner--aurora {
  background-image: linear-gradient(125deg, #092f37, #207d74 45%, #5d3f91 85%) !important;
}
.content > .view.profile-view--public > .profile-card > .profile-banner.profile-banner--graphite {
  background-image: linear-gradient(135deg, #11181c, #34464b 55%, #62cdb8) !important;
}
.content > .view.profile-view--public > .profile-card > .profile-banner.profile-banner--sunset {
  background-image: linear-gradient(125deg, #3a1827, #a94f48 52%, #f1ae63) !important;
}
.content > .view.profile-view--public > .profile-card > .profile-banner.profile-banner--ice {
  background-image: linear-gradient(125deg, #173557, #3577aa 52%, #9de1e7) !important;
}

@media (max-width: 600px) {
  .content > .view.profile-view--public {
    width: 100%;
    max-width: 100%;
    padding-bottom: 24px;
  }

  .content > .view.profile-view--public > .profile-card {
    width: 100%;
    margin: 0;
    padding: 16px 0 0;
    overflow: visible;
  }

  .content > .view.profile-view--public > .profile-card .profile-banner {
    min-height: 128px !important;
  }

  .content > .view.profile-view--public > .profile-card .profile-top {
    align-items: flex-start;
    gap: 12px;
  }

  .content > .view.profile-view--public > .profile-card .profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .content > .view.profile-view--public > .profile-card .profile-actions > button {
    min-height: 44px;
  }
}