/* Hamrah 4.11.1 / 524 — Profile Layout Fit & Android Motion Stabilization */

/* The photo action is intentionally outside the hero/avatar. */
#profileView .profile-avatar-wrap > .avatar-camera {
  display: none !important;
}

#profileView,
#profileView > *,
#profileView .profile-hero-v473,
#profileView .profile-card,
#profileView .profile-account-actions,
#profileView .profile-fact-grid,
#profileView .profile-photo-editor {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
}

#profileView {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

@supports not (overflow: clip) {
  #profileView { overflow-x: hidden; }
}

#profileView > * {
  inline-size: min(100%, var(--profile-max, 780px));
}

#profileView .profile-avatar-wrap {
  position: relative;
  inline-size: 112px;
  block-size: 112px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  contain: layout paint;
}

#profileView .profile-avatar-wrap .avatar-xl {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 100%;
  min-block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  contain: paint;
}

.profile-photo-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid var(--pc-line, var(--line));
  border-radius: 18px;
  background: var(--pc-soft, var(--surface-2));
}

.profile-photo-editor-copy,
.profile-photo-editor-actions {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.profile-photo-editor-copy { gap: 10px; }
.profile-photo-editor-copy > span:last-child { min-inline-size: 0; }
.profile-photo-editor-copy b,
.profile-photo-editor-copy small { display: block; }
.profile-photo-editor-copy b { font-size: .78rem; }
.profile-photo-editor-copy small {
  margin-block-start: 3px;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.profile-photo-editor-actions {
  flex: 0 0 auto;
  gap: 7px;
}

.profile-photo-action,
.profile-photo-remove {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 850;
  white-space: nowrap;
}

.profile-photo-action {
  color: #fff;
  background: var(--gradient);
  box-shadow: var(--shadow-primary);
}

.profile-photo-remove {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 22%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.profile-photo-action svg,
.profile-photo-remove svg {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 auto;
}

.profile-photo-action:focus-visible,
.profile-photo-remove:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 2px;
}

/* Android WebView: stable viewport geometry and no layout-affecting profile motion. */
html[data-hamrah-profile-platform="android"] #profileView.profile-view {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  padding: 0 0 calc(26px + env(safe-area-inset-bottom)) !important;
  overflow-x: clip !important;
  overflow-y: auto;
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  contain: inline-size;
}

@supports not (overflow: clip) {
  html[data-hamrah-profile-platform="android"] #profileView.profile-view {
    overflow-x: hidden !important;
  }
}

html[data-hamrah-profile-platform="android"] #profileView > * {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-hero-v473 {
  margin: 0 !important;
  padding: calc(30px + env(safe-area-inset-top)) 14px 38px !important;
  border-inline: 0 !important;
  border-block-start: 0 !important;
  border-radius: 0 0 30px 30px !important;
  box-shadow: none !important;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-overview-card {
  inline-size: calc(100% - 20px) !important;
  margin: -20px 10px 0 !important;
  padding-block-start: 28px;
}

html[data-hamrah-profile-platform="android"] #profileView #profileEditCard {
  inline-size: calc(100% - 20px) !important;
  margin: 8px 10px 0 !important;
}

html[data-hamrah-profile-platform="android"] #profileView :is(
  .profile-avatar-wrap,
  .profile-avatar-wrap .avatar-xl,
  .profile-pattern,
  .profile-hero-v473::after
) {
  animation: none !important;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-avatar-wrap,
html[data-hamrah-profile-platform="android"] #profileView .profile-avatar-wrap .avatar-xl {
  transform: none !important;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-avatar-wrap {
  inline-size: 108px !important;
  block-size: 108px !important;
  margin: 0 auto 12px !important;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-avatar-wrap .avatar-xl {
  transition: opacity 160ms ease, box-shadow 160ms ease !important;
}

html[data-hamrah-profile-platform="android"] #profileView :is(
  h2,
  p,
  b,
  small,
  label,
  .profile-overview-heading,
  .profile-photo-editor-copy
) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

html[data-hamrah-profile-platform="android"] #profileView .profile-form {
  animation: none !important;
}

@media (max-width: 620px) {
  .profile-photo-editor {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-photo-editor-actions {
    inline-size: 100%;
  }

  .profile-photo-action,
  .profile-photo-remove {
    flex: 1 1 0;
  }
}

@media (max-width: 360px) {
  .profile-photo-editor-actions { gap: 6px; }
  .profile-photo-action,
  .profile-photo-remove {
    min-inline-size: 0;
    padding-inline: 8px;
    font-size: .61rem;
  }
}

.profile-photo-editor[aria-busy="true"] {
  cursor: progress;
}

.profile-photo-editor[aria-busy="true"] .profile-photo-action,
.profile-photo-editor[aria-busy="true"] .profile-photo-remove {
  opacity: .64;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #profileView :is(.profile-avatar-wrap, .avatar-xl, .profile-pattern, .profile-hero-v473::after, .profile-form) {
    animation: none !important;
    transition: none !important;
  }
}

html[data-hamrah-profile-platform="android"] #profileView.active,
html[data-hamrah-profile-platform="android"] #profileView.active .profile-hero {
  animation: none !important;
  transform: none !important;
}

/* R8 Profile Picker HF1.2: the real file input owns the physical tap. */
.profile-photo-picker-hit{position:relative;display:inline-flex;flex:0 0 auto;min-inline-size:0;min-block-size:44px;isolation:isolate}
.profile-photo-picker-hit>.profile-photo-action{inline-size:100%;block-size:100%;pointer-events:none}
.profile-photo-native-input{position:absolute;z-index:2;inset:0;inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:44px;margin:0;padding:0;border:0;opacity:.001;cursor:pointer;font-size:0;color:transparent;background:transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.profile-photo-picker-hit:focus-within>.profile-photo-action{outline:3px solid color-mix(in srgb,var(--primary) 28%,transparent);outline-offset:2px}
.profile-photo-editor[aria-busy="true"] .profile-photo-native-input{pointer-events:none;cursor:progress}
@media(max-width:620px){.profile-photo-picker-hit{flex:1 1 0}}