/* Mobile profile editor and profile-surface fixes. Loaded after the main skin styles. */
.modal-backdrop {
  overflow-y: auto;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.profile-editor {
  width: min(100%, 520px);
  max-height: calc(100vh - 24px);
  max-height: min(760px, calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  min-height: 0;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.editor-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, transparent, var(--panel) 24%);
}
.editor-actions button { min-width: 0; flex: 1 1 140px; }
.upload-zone {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.upload-zone input[type="file"] {
  z-index: 3;
  display: block;
  opacity: .001;
  -webkit-appearance: none;
  appearance: none;
}
.post-card {
  background: var(--bg) !important;
}
.content .profile-card,
.content .post-card,
.profile-card.profile-card--styled,
.profile-card.profile-card--styled > *,
.profile-card.profile-card--styled .profile-top,
.profile-card.profile-card--styled .profile-identity,
.profile-card.profile-card--styled .profile-bio,
.profile-card.profile-card--styled .profile-stats,
.profile-card.profile-card--styled .spark-card,
.profile-card.profile-card--styled .profile-actions {
  background-color: transparent !important;
}
.content .post-card {
  background: var(--bg) !important;
}
.profile-card.profile-card--styled {
  border-color: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  .modal-backdrop {
    align-items: flex-start;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
  }
  .profile-editor {
    width: 100%;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + 8px));
    margin: auto 0;
    padding: 16px;
    border-radius: 18px;
  }
  .editor-head { margin-bottom: 16px; }
  .editor-head h2 { font-size: 21px; }
  .profile-header-options { gap: 7px; }
  .profile-header-option { min-height: 76px; padding: 7px; }
  .profile-header-preview { height: 34px; }
  .editor-actions { gap: 8px; }
  .editor-actions button { flex-basis: 0; padding: 0 10px; }
}
@media (max-height: 620px) and (max-width: 600px) {
  .modal-backdrop { align-items: flex-start; }
  .profile-editor { margin-top: 4px; }
}

/* Keep the profile editor a real touch-scrolling surface on Android WebView and iOS. */
@media (max-width: 600px) {
  .modal-backdrop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
  }

  .modal-backdrop .profile-editor {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: none;
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 96px;
  }

  .profile-editor .form-stack {
    min-height: 0;
    padding-bottom: 10px;
  }

  .profile-editor .upload-zone {
    min-height: 92px;
    touch-action: manipulation;
  }

  .profile-editor .editor-actions {
    position: sticky;
    bottom: -1px;
    z-index: 5;
    margin-right: -16px;
    margin-left: -16px;
    padding: 14px 16px 4px;
    background: linear-gradient(180deg, transparent 0, var(--panel) 24%);
  }
}