/* Mr Pharmacist — MEDCORE profile avatar parity v141.
   Profile-photo feature only. No unrelated layout, routing, content, subscription, or account behavior changes. */

.profile-topbar-avatar{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #d3e2e5;
  border-radius:50%;
  background:var(--mrph-mc-panel,#fff);
  overflow:hidden;
  box-shadow:0 5px 14px rgba(5,42,54,.09);
}
.profile-topbar-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-avatar-picker{position:relative;overflow:hidden;cursor:pointer;padding:0}
.profile-avatar-picker img{display:block;width:100%;height:100%;object-fit:cover}
.profile-avatar-picker>span{display:grid;place-items:center;width:100%;height:100%}
.profile-avatar-picker.is-saving{cursor:wait;opacity:.66}

/* MEDCORE visible profile photo control */
.profile-avatar-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:174px;
  padding:6px 11px 6px 6px;
  border:1px solid color-mix(in srgb,var(--mrph-mc-accent,#147a83) 22%,var(--mrph-mc-line,#dce5ee));
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--mrph-mc-accent-soft,#e4f4f2) 58%,var(--mrph-mc-panel,#fff)),var(--mrph-mc-panel,#fff));
  cursor:pointer;
  box-shadow:0 8px 20px rgba(7,58,67,.08);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.profile-avatar-control:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--mrph-mc-accent,#147a83) 44%,var(--mrph-mc-line,#dce5ee));
  box-shadow:0 12px 24px rgba(7,58,67,.12);
}
.profile-avatar-control:focus-within{
  outline:3px solid color-mix(in srgb,var(--mrph-mc-accent,#147a83) 20%,transparent);
  outline-offset:2px;
}
.profile-avatar-control.is-saving{cursor:wait;opacity:.68;transform:none}
.profile-avatar-file-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.profile-avatar-control .profile-avatar-picker{flex:0 0 auto;pointer-events:none}
.profile-avatar-control .profile-avatar-picker img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.profile-avatar-camera{
  position:absolute;
  left:45px;
  bottom:3px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border:2px solid var(--mrph-mc-panel,#fff);
  border-radius:50%;
  background:var(--mrph-mc-accent,#147a83);
  color:#fff;
  font-size:14px;
  font-style:normal;
  font-weight:900;
  line-height:1;
  box-shadow:0 4px 10px rgba(7,58,67,.2);
  pointer-events:none;
}
.profile-avatar-action{display:grid;gap:2px;text-align:left;line-height:1.15;pointer-events:none}
.profile-avatar-action b{color:var(--mrph-mc-ink,#172333);font-size:.82rem;white-space:nowrap}
.profile-avatar-action small{color:var(--mrph-mc-muted,#657386);font-size:.66rem;white-space:nowrap}
.mrph-profile-avatar-feedback{margin:0;font-size:.82rem;line-height:1.45}

/* MEDCORE profile avatar topbar geometry lock */
.topbar .topbar-actions>button.profile-topbar-avatar{
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  flex:0 0 40px!important;
  inline-size:40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  block-size:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  aspect-ratio:1/1!important;
  margin:0!important;
  padding:0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  align-self:center!important;
  line-height:0!important;
}
.topbar .topbar-actions>button.profile-topbar-avatar>img{
  display:block!important;
  box-sizing:border-box!important;
  inline-size:100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  block-size:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  margin:0!important;
  padding:0!important;
}

/* Keep the avatar on a stable paint layer across route remounts and tactile presses. */
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar,
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar img{
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  will-change:auto!important;
}
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar{isolation:isolate;contain:paint}
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar.mrph-kt-pressing,
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar.mrph-kt-nav-pressing{
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
html[data-mrph-khalid-touch-feel="v99"] .profile-topbar-avatar.mrph-kt-feel-host::after{display:none!important;content:none!important}

@media(max-width:620px){
  .profile-avatar-control{min-width:0;padding-right:8px}
  .profile-avatar-action small{display:none}
  .profile-avatar-action b{font-size:.75rem}
  .topbar .topbar-actions>button.profile-topbar-avatar{
    flex-basis:38px!important;
    inline-size:38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    block-size:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }
}

/* Phone-only placement: same real-phone viewport rule used by MEDCORE; tablet/iPad/desktop remain untouched. */
@media(max-width:767px) and (max-height:1024px){
  body.app-body #view.mrph-medcore-profile-view .mrph-medcore-profile-identity>.mrph-medcore-profile-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
  }
  body.app-body #view.mrph-medcore-profile-view .mrph-medcore-profile-identity>.mrph-medcore-profile-head .profile-avatar-control{
    align-self:center!important;
    margin-inline:auto!important;
    max-width:calc(100% - 16px)!important;
  }
}